css triangle at the end of <li> - html

Question

I want to achieve something like this
How do I put this triangle css
.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 42px 21px 0;
border-color: transparent #eeeeee transparent transparent;
line-height: 0px;
_border-color: #000000 #eeeeee #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
to make a triangle at the end of my tab? DEMO http://jsfiddle.net/p69qfqsx/

Answer 1

New CSS for the list:
ul{
width: 200px;
border: 1px solid #ccc;
}
li a{
background-color: #fff;
padding: 5px 10px;
display: block;
position: relative;
color: #666;
text-decoration: none;
}
li a:hover, li.active a{
background-color: #eee;
}
li a:hover:after, li.active a:after{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
/* background-color: #ddd; */
content: '';
position: absolute;
right: -2px;
top: 0;
}
https://jsfiddle.net/p69qfqsx/2/
Tested just for chrome hope it helps.

Answer 2

Here's the codes I modify for little change:
li a:hover:after{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 12px solid transparent;
border-right: 10px solid #fff;
/* background-color: #ddd; */
content: '';
position: absolute;
right: -2px;
top: 1;
}
I just remove li.active a:after to let pointer makes it. DEMO
But I prefer using what #Andre Morales suggest since it works here.

Answer 3

It's pretty easy. You can do it in many methods, I can suggest an easy trick. Add an span inside the li tag. check this out : jsFiddle
HTML
<li id="LI_3">
Platform
<span class="trian"></span>
</li>
CSS
.trian {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #fff;
position:absolute;
right:0;
top:0;
}

Answer 4

Add this to your css where .active is the class of the current list
[id^=UL_] > [id^=LI_].active:before{
position: absolute;
top: 0;
right: -1px; /* -1px to hide the right border */
content:'';
z-index: 1;
border-top: 20px solid transparent; /*20 = li.height /2 */
border-bottom: 20px solid transparent;
border-right: 20px solid white
}
DEMO
#DIV_1 {
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 264px;
min-height: 1px;
position: relative;
width: 169px;
perspective-origin: 84.5px 132px;
transform-origin: 84.5px 132px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
margin: 0px 0px 0px -15px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 15px;
}/*#DIV_1*/
#UL_2 {
box-sizing: border-box;
color: rgb(51, 51, 51);
height: 264px;
width: 139px;
perspective-origin: 69.5px 132px;
transform-origin: 69.5px 132px;
border-top: 0px none rgb(51, 51, 51);
border-right: 1px solid rgb(238, 238, 238);
border-bottom: 0px none rgb(51, 51, 51);
border-left: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px;
outline: rgb(51, 51, 51) none 0px;
padding: 0px;
}/*#UL_2*/
#UL_2:after {
box-sizing: border-box;
clear: both;
color: rgb(51, 51, 51);
display: table;
width: 1px;
perspective-origin: 0.5px 0px;
transform-origin: 0.5px 0px;
content: ' ';
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:after*/
#UL_2:before {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: table;
width: 1px;
perspective-origin: 0.5px 0px;
transform-origin: 0.5px 0px;
content: ' ';
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:before*/
#LI_3 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 40px;
position: relative;
width: 139px;
perspective-origin: 69.5px 20px;
transform-origin: 69.5px 20px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_3*/
#A_4 {
box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
height: 40px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 20px;
transform-origin: 69.5px 20px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(85, 85, 85);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(85, 85, 85) none 0px;
padding: 10px 15px;
}/*#A_4*/
#LI_5, #LI_7, #LI_9, #LI_13 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 42px;
position: relative;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_5, #LI_7, #LI_9, #LI_13*/
#A_6, #A_8, #A_14 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 42px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_6, #A_8, #A_14*/
#A_10 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 42px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 21px;
transform-origin: 69.5px 21px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_10*/
#LI_11 {
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
height: 62px;
position: relative;
width: 139px;
perspective-origin: 69.5px 31px;
transform-origin: 69.5px 31px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
margin: 0px -1px -1px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#LI_11*/
#A_12 {
box-sizing: border-box;
color: rgb(51, 122, 183);
display: block;
height: 62px;
position: relative;
text-align: left;
text-decoration: none;
width: 139px;
perspective-origin: 69.5px 31px;
transform-origin: 69.5px 31px;
border: 1px solid rgba(0, 0, 0, 0);
font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
list-style: none outside none;
outline: rgb(51, 122, 183) none 0px;
padding: 10px 15px;
}/*#A_12*/
[id=UL_2] > [id=LI_3]:before{
position: absolute;
top: 0;
right: -1px;
content:'';
z-index: 1;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white
}
<div id="DIV_1">
<!-- required for floating -->
<!-- Nav tabs -->
<ul id="UL_2">
<li id="LI_3">
Platform
</li>
<li id="LI_5">
Content
</li>
<li id="LI_7">
Marketing
</li>
<li id="LI_9">
Social
</li>
<li id="LI_11">
In-app Responses
</li>
<li id="LI_13">
Systems
</li>
</ul>
</div>

Answer 5

I think this is a cleaner method using clip-path:
ul{
width: 160px;
border: 1px solid #ccc;
border-right: none;
list-style-type: none;
margin:0;
padding:0;
}
li a{
padding: 5px 10px;
display: block;
color: #666;
text-decoration: none;
border-right:1px solid #ccc;
}
li a:hover, li.active a{
background-color: #eee;
clip-path: polygon( 0% 0%,0% 100%,100% 100%,92% 50%,100% 0%);
}
<ul>
<li class="active">
Platform
</li>
<li>
Content
</li>
<li>
Marketing
</li>
<li>
Social
</li>
<li>
In-app Responses
</li>
<li>
Systems
</li>
</ul>