CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ThunD3eR
ThunD3eR

Reputation: 3456

How to create a underline with small break in middle with css?

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:

enter image description here

How do I do this?

Upvotes: 0

Views: 180

Answers (3)

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}

Upvotes: 1

Friend
Friend

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

Hazonko
Hazonko

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

Related Questions