CSS实现div梯形分割
生活随笔
收集整理的這篇文章主要介紹了
CSS实现div梯形分割
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原理
詳見代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css實現(xiàn)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>效果如下：
總結(jié)
以上是生活随笔為你收集整理的CSS实现div梯形分割的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux hping3命令,系列H -
- 下一篇： 深入理解CSS盒模型 - 程序猿的程 -