CODEWITHSUNDEEP
cssbordershapes
Ankit Patel
Ankit Patel

Reputation: 21

Using triangle shape css for dropdown arrow with after before

How can I use triangle shape css for drop-down arrow with before after.

I have created this css

<span class="arrow-top"></span>
.arrow-top {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 35px solid #943c3c;;
}

i have also created demo. http://trianglecss.blogspot.com/2018/06/triangle-shape-with-css.html

Upvotes: 1

Views: 9768

Answers (2)

Poe Eain
Poe Eain

Reputation: 83

I'd suggest using icon library such as fontawesome,glyphicons. It looks better for UI design.

$('.dropdown').on('click', function(){
        $(this).toggleClass('show');
})
    .dropdown{
      position:relative;
    }
    .dropdown:after{
      position:absolute;
      content:'';
      left:80px;
      top:8px;
    	width: 0;
    	height: 0;
    	border-left: 4px solid transparent;
    	border-right: 4px solid transparent;
    	border-top: 8px solid red;
    }
    
    .submenu{display:none;}

   .show .submenu{
      display:block;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">Dropdown
      <ul class="submenu">
             <li>submenu 1</li>
             <li>submenu 2</li>
      </ul>
</li>
</ul>

Upvotes: 0

brianespinosa
brianespinosa

Reputation: 2408

:before and :after are CSS pseudo classes. Think of them as new tags rendered before or after the class you are targeting. So if you have a div called .dropdown you can make an arrow before or after that div without any extra markup.

HTML:

<div class="dropdown">
  My Dropdown
</div>

CSS:

.dropdown::after {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 35px solid #943c3c;;
}

You'll end up needing to add additional styling to this triangle to position it, but that's the start.

Upvotes: 1

Related Questions