[分享]css分割线中间带三角

CSS中的分割线是网页设计中常用的一种元素，在页面排版和布局中起到了很好的作用。在分割线的中间添加三角，则可以使元素更加独特和优美。/ 添加分割线中间的三角形 / .line { : relative...

CSS中的分割线是网页设计中常用的一种元素，在页面排版和布局中起到了很好的作用。在分割线的中间添加三角，则可以使元素更加独特和优美。

/* 添加分割线中间的三角形 */

.line {
  position: relative;
  padding-bottom: 10px;
}

.line::before {
  content: ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  transform: translateY(-50%);
}

.line::after {
  content: ';
  position: absolute;
  top: calc(50% - 5px);
  left: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc;
  transform: translateX(-50%);
} 

上述代码中，使用了CSS伪元素来实现分割线中间的三角形效果。在伪元素中，::before表示分割线的上半部分，::after表示三角形。

同时，.line是一个包含分割线及其三角形的包裹元素，在.pre标签中使用该类即可实现很好的分割线效果。