CSS實現div梯形分割

原理

使用的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>

效果如下：

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/249105.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/249105.shtml
英文地址，請注明出處：http://en.pswp.cn/news/249105.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！