原理
- 使用的border邊框屬性
- 結合svg 轉換
詳見代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css實現div邊框斜角</title>
<style type="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>
<div class="labels">
<span class="label" style="background-color:#2c968a; width: 102px;">
127.0.0.1
</span>
<span v-if="row.url" class="label port">
<svg class="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>
8080
</span>
</div>
</body>
</html>
效果如下：
![在這裏插入圖片描述]()
