CSS实现div梯形分割

最新推荐文章于 2024-05-10 10:46:48 发布

IT淘金者

最新推荐文章于 2024-05-10 10:46:48 发布

阅读量2.5k

点赞数

分类专栏： HTML5/CSS3 HTML5/CSS3布局专栏

原文链接：https://blog.csdn.net/huichao199175/article/details/107251106

版权

HTML5/CSS3 同时被 2 个专栏收录

31 篇文章 3 订阅

订阅专栏

HTML5/CSS3布局专栏

13 篇文章 0 订阅

订阅专栏

原理

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

效果如下：

在这里插入图片描述

IT淘金者

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS实现div梯形分割

原理使用的border边框属性结合svg 转换详见代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现div边框斜角</title> <style type="text/css">.lab...
复制链接

扫一扫

专栏目录