Reputation: 3456
This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load. So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
Upvotes: 0
Views: 180
Reputation: 13578
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
Upvotes: 1
Reputation: 516
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Upvotes: 1
Reputation: 1035
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
Upvotes: 2