Implement hollow triangle and hollow triangle

Implement hollow triangle and hollow triangle

Background: A project has a tab switch that requires the effect of a hollow triangle. As a back-end engineer, I really don't know how to write it. I found some implementation methods on the Internet and found that most of them are solid triangles. Later, I finally found a hollow triangle, which suddenly burst into tears. The implementation results are relatively rough, but the idea is still clear. I have made some improvements on the basis of the original, and added some results.

Hollow triangle principle: Mainly implemented using element pseudo classes (: before,: after)

: Ps: color change

Implementation Code:

<Style>
# Talkbubble {
Width: 120px;
Height: 80px;
Position: relative;
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
Border-radius: 10px;
Border: 1px #808080 solid;
Background-color: # fff;
}

# Talkbubble: before {
Content :"";
Position: absolute;
Top: 100%;
Left: 50px;
Width: 0;
Height: 0;
Border-left: 15px solid transparent;
Border-top: 15px solid #808080;
Border-right: 15px solid transparent;
}

. Inlayer: after {
Content :"";
Position: absolute;
Top: 100%;
Left: 51px;
Width: 0;
Height: 0;
Border-left: 14px solid transparent;
Border-top: 14px solid # fff;
Border-right: 14px solid transparent;
}

# Talkbubble: hover {
Background-color: # ff0000;
}

. Inlayer: hover: after {
Width: 0;
Height: 0;
Border-left: 14px solid transparent;
Border-top: 14px solid # ff0000;
Border-right: 14px solid transparent;
}
</Style>

<! -- Html -->
<Div id = "talkbubble" class = "inlayer">
Hollow triangle
</Div>