CODEWITHSUNDEEP
jquerycssmenucss-shapes
B L Praveen
B L Praveen

Reputation: 1990

Using Css transparent arrow over a line

I need to convert a design to a html. Design shows an arrow transparent pointing to the currently selected tab.

Has I find it difficult I am using a filled triangle. I want to replace it with a thin transparent triangle. Jsfiddle link here

triangle arrow like here

li {
      width:100px;
      list-style-type:none;
      float:left;  
      color:#fff;
       padding:10px 5px;
     position:relative;
    text-align:center;
}
li.selected:after {
 border: 8px solid transparent;
 border-top: none;
 border-bottom-color:#fff;
 position:absolute; 
    bottom:-10px;
 left:40%;   
    content:' ';
}

I have used thin image instead of css triangle my questions is how to make seamless line with a spike on it pointing the selected menu

--^--

Upvotes: 0

Views: 113

Answers (1)

Bluety
Bluety

Reputation: 1909

If your <li> is a same width, you can:

  • remove border from <ul>
  • apply border on all <li> not active
  • On the active <li> you can user :before and :after simulate border arround the arrow.
  • And you need to add element like span in your <li> for the arrow.

Demo: http://jsfiddle.net/np6ztcav/4/

Upvotes: 1

Related Questions