[分享]css写带三角的边框

CSS可以通过设置边框样式来实现带三角的边框效果。下面是一个例子：

/* 设置一个带三角的边框 */
.example {
  position: relative;
  border: 1px solid #ccc;
  padding: 10px;
}

.example::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 14px 14px 14px;
  border-color: transparent transparent #ccc transparent;
} 

我们首先在一个具有相对定位的元素上，设置一个普通的边框样式。然后，通过伪元素`::before`来添加一个三角形。

伪元素`::before`在元素内部创建一个虚拟的子元素，因此我们需要通过`content`属性来设置样式的内容。

接着，我们设置该元素的位置为绝对定位，并将其放置在边框的顶部。为了将其居中，我们设置左侧的偏移量为50%并将其向左移动一半的宽度。

接下来，我们通过设置`border-style`属性为solid、`border-width`属性来设置边框的宽度和`border-color`属性来设置边框的颜色来创建一个三角形。我们将上边和右边的边框宽度设置为0，并将左边和下边的边框宽度设置为14像素，以便创建一个等腰直角三角形。

最终，我们可以在`::before`伪元素的样式中设置颜色为透明的边框样式，使其与其底部的元素颜色一致。

这就是通过CSS创建带三角的边框的方法。它是非常简单和有效的，适用于许多不同的情况。试着在自己的项目中使用它来打造漂亮而又实用的设计元素吧！