實現空心三角形

   背景: 專案過程中有個tab切換需要用到空心三角形的效果。身為後端工程師，實在是不知道怎麼寫，在網路上找了一些看了別人的實現方式，發現大多數都是實心三角。後來終於發現一個實現空心三角的，頓時熱淚盈眶啊。實現效果比較粗略，不過還是思路還是比較清晰的，借鑒了一下，在原有的基礎上做了一些改進，增加一些效果

   空心三角原理：主要利用元素偽類(:before,:after)實作

   效果圖： ps：移入換色

 實現代碼：

content: " ";

position: absolute;
top: 100%;
left: 50px;
width: 0;
height: 0;left頂: 15px solid #808080;
border-right: 15px solid transparent;
}

.inlayer:after {
content: " ";
position: absolute;

top: 100%;

left: 51px;
width: 0;opp.頂: 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; /style>

空心三角形