Grow your CSS skills. Land your dream job.

Last updated on:

Triangular List Bullets

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

Reference URL

Comments

  1. Permalink to comment#

    tricks are very impressive,,,
    but I greatly admire the comments .. suppose blogspot platform can be like this …

  2. Doug T
    Permalink to comment#

    Now… how do I make them rotate downward when the menu/list items expand? Preferably sans-jquery… CSS only.

    • I saw an example, you’re talking about, here http://www.artlebedev.ru/tools/technogrette/html/treeview/

    • In your case you may try to hide related ul content and display it on hover (using css) and rotate triangle by using

      li:hover:before {
          border-width: 0.45em 0.35em 0 0.35em ;
      }

      Maybe transitions will also be helpfull, I dunno.

    • Sean Erdrich
      Permalink to comment#

      Here’s a bit of tweaking I did really quickly… I tried a few things and couldn’t find an efficient way to animate the transform for when the hover starts and ends. I suppose if you used javascript you could do something like that, but this snippet is pure css.

      
      <ul>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                <div>This is visible when the &lt;li&gt; is hovered over.</div>
           </li>
           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
      </ul>
                 
      

      Partnered with this:

      
      ul {
          margin: 0.75em 0;
          padding: 0 1em;
          list-style: none;}
      	
      
      li:before { 
          content: "";
          border-color: transparent #111;
          border-style: solid;
          border-width: 0.35em 0 0.35em 0.45em;
          display: block;
          height: 0;
          width: 0;
          left: -1em;
          top: 0.9em;
          position: relative;
      	-webkit-transition:all 0.15s linear;
      	-moz-transition:all 0.15s linear;
      	-o-transition:all 0.15s linear;
      	transition:all 0.15s linear;}
      
      
      ul li div{
      	height:0px;	/*	You could use negative positioning too	*/
      	opacity:0;
      	transition:all .3s ease-in-out;
      	-webkit-transition:all .3s ease-in-out;
      	-moz-transition:all .3s ease-in-out;
      	-o-transition:all .3s ease-in-out;
      	transition:all .3s ease-in-out;}
      	
      	
      ul li:hover div{
      	height:20px;
      	opacity:1;}
      	
      	
      ul li:hover:before{
      	-webkit-transform:rotate(90deg);
      	-moz-transform:rotate(90deg);
      	-o-transform:rotate(90deg);
      	transform:rotate(90deg);}
      
      
  3. Awesome trick. However, here we go, IE 7 does not show the triangle bullets, is there a workaround band-aid approach to this (hack)?

    • Javi: IE7 does not support the :before and :after pseudo elements.

      I was going to suggest using the Selectivizr script which adds a lot of CSS3 selector functionality to IE 6-8, but it does not support those pseudo elements either. Apparently this is because :before and :after cause changes to the DOM which might cause some of Selectivizr’s other functionality to fail.

      So, unless someone else has a clever workaround, I guess your only option is to feed IE7 a separate rule via conditional comments, perhaps using background images as list markers.

    • Sean Erdrich
      Permalink to comment#

      Here’s a working (if somewhat lengthy) method:

      CSS:

      
      ul {
          margin: 0.75em 0;
          padding: 0 1em;
          list-style: none;}
      	
      	
      ul li span.bullet{
      	content: "";
          border-color: transparent #111;
          border-style: solid;
          border-width: 0.35em 0 0.35em 0.45em;
          display: inline-block;
          height: 0;
          width: 0;/*
          left: -1em;
          top: 0.9em;*/
          position: relative;
      	left:-5px;}
      
      
      ul li div{
      	height:0px;	/*	You could use negative positioning too	*/
      	opacity:0;
      	margin-left:8px;
      	transition:all .3s ease-in-out;
      	-webkit-transition:all .3s ease-in-out;
      	-moz-transition:all .3s ease-in-out;
      	-o-transition:all .3s ease-in-out;
      	transition:all .3s ease-in-out;}
      	
      	
      ul li:hover div{
      	height:20px;
      	opacity:1;}
      	
      	
      ul li.dropdown:hover span.bullet {
      	-webkit-transform:rotate(90deg);
      	-moz-transform:rotate(90deg);
      	-o-transform:rotate(90deg);
      	transform:rotate(90deg);}
      
      

      HTML

      
      
      <ul>
               <li class="dropdown">
                  <span class="bullet"></span>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        <div>This is visible when the &lt;li&gt; is hovered over.
      </div>
      
      
                  </li>
                        <li><span class="bullet">
                              </span>Aliquam tincidunt mauris eu risus.</li>
      
      
      
      
                  </li>
                        <li><span class="bullet">
                              </span>Aliquam tincidunt mauris eu risus.</li></ul>
      
      
  4. Permalink to comment#

    In Firefox (18.0.1) this was leaving a yucky dark grey outline/aliasing around the triangle. This is much more noticeable when you are using a colored bullet, rather than the black in this example. In Chrome it looked fine.

    I found a fix, which is to use an RGBA value for the border background color, with an RGB more closing matching the background color. Transparent “isn’t really transparent” where diagonals and anti-aliasing are concerned:
    Fixed (on white BG): border-color: rgba(255,255,255,0) #e45900;

  5. Wil T
    Permalink to comment#

    This was an incredibly helpful tutorial. I’m interested in making the triangles only appear where I actually have a drop down menu. I can’t figure out how to suppress them on a list item that doesn’t have a sublist. I have figured out how to suppress the triangles on the sublists themselves though. Extra code pasted below:

    sidebar ul li ul li:before{
    border: none;
    }

    • Wil T
      Permalink to comment#

      I figured it out. Just had to create a new class to suppress the arrow.

      ul li.no_carrot:before{
      border-width: 0;
      }

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".