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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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