[分享]css分割线倒三角

CSS分割线倒三角可以为网页增添一定的美观度，使得页面浏览体验更舒适。在CSS中，我们可以用伪元素(:before和:after)来实现分割线倒三角。以下是代码示例：.line { : relativ...

CSS分割线倒三角可以为网页增添一定的美观度，使得页面浏览体验更舒适。在CSS中，我们可以用伪元素(:before和:after)来实现分割线倒三角。以下是代码示例：

.line {
  position: relative;
  border-bottom: 1px solid #000;  /*创建一个底部实线*/
  margin-bottom: 20px;
}

.line:before {
  content: "";
  position: absolute;
  top: -10px;  /*设置距离顶部的偏移量*/
  left: 50%;  /*距离左边的距离为宽度一半*/
  transform: translateX(-50%) rotate(45deg);  /*旋转45度*/
  border-top: 1px solid #000;  /*创建一个倒三角*/
  border-left: 1px solid #000;
  height: 10px;  /*设置三角形高度*/
  width: 10px;  /*设置三角形宽度*/
}

.line:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);  /*将三角形绕中心点顺时针旋转45度*/
  border-top: 1px solid #000;
  border-right: 1px solid #000;  /*右上为斜线*/
  height: 10px;
  width: 10px;
} 

以上就是一个基本的分割线倒三角的实现。通过设置:before和:after伪元素的样式和位置，我们可以轻松实现分割线倒三角的效果。值得注意的是，:before和:after伪元素需要设置position属性以及它们的相对位置，这样才能让它们出现在我们想要的位置。