How to make an upside down triangle outline in CSS - html

Question

I'm wondering if it's possible to achieve this design with CSS? I'm thinking of creating a div or span element after the text and making it a box with only two colored borders then rotating it 45 degrees? Otherwise I'm thinking of just using an image sprite.

Answer 1

You can use a CSS like this:
.caret.caret-reversed {
border-bottom: 10px solid #000000;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
height: 0;
vertical-align: top;
width: 0;
transform: rotate(180deg);
}
<span class="caret caret-reversed"></span>
Change the border-bottom colour to #fff for your solution.
Or there's another way using pseudo classes:
body {
background-color: #003;
font-family: verdana;
font-size: 10pt;
}
a {
color: #003;
background-color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px;
position: relative;
z-index: 2;
border: 1px solid #f33;
}
a:after,
a:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
a:after {
border-color: transparent;
border-top-color: #fff;
border-width: 5px;
margin-left: -5px;
}
a:before {
border-color: rgba(0, 0, 51, 0);
border-top-color: #003;
border-width: 6px;
margin-left: -6px;
}
Performance

Answer 2

body {
background: #111842
}
li {
width: 100px;
display: inline-block;
border: 1px solid #000;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
z-index: 10;
background: #111842;
border: 1px solid #f19d47;
}
li a {
color: #fff;
text-decoration: none;
}
li:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 1px;
z-index: 15;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #f19d47;
}
li:before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 1px;
z-index: 20;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #111842;
}
li.active {
background: #fff;
border: 1px solid #fff;
}
.active a {
color: #000;
}
li.active:after,
li.active:before {
content: '';
border-top: 10px solid #fff;
}
<ul>
<li class="active">One
</li>
<li>One
</li>
<li>One
</li>
<li>One
</li>
<ul>