使用的border边框属性 结合svg 转换 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < styletype = " text/css" >
.labels { display : inline-block; display : inline-flex; color : #fff; line-height : 22px;
} .label { display : inline-block; text-align : center;
} .label.port { background-color : #636F80; width : 48px;
} .label.port::before { border-top : 11px solid transparent; border-right : 5px solid #636F80; border-bottom : 11px solid #636F80; border-left : 5px solid transparent;
} .label + .label { position : relative; z-index : 3;
} .label + .label .triangle { width : 22px; height : 22px; position : absolute; right : 100%; top : 0; margin-right : -8px;
} </ style> </ head> < body> < divclass = " labels" > < spanclass = " label" style =" background-color : #2c968a; width : 102px; " > </ span> < spanv-if = " row.url" class = " label port" > < svgclass = " triangle" viewBox = " 0 0 1024 1024" xmlns: xlink= " http://www.w3.org/1999/xlink" > < path style =" fill : #636F80; " d = " M679.563636 2.771938h7.345635l-7.345635 1021.228062H336.443943z" /> </ svg> </ span> </ div> </ body> </ html>
![[19/04/23-星期二] GOF23_创建型模式(工厂模式、抽象工厂模式)](https://img2018.cnblogs.com/blog/1531287/201904/1531287-20190422001238129-2001569042.png)
