css三角形有边框

CSS三角形是一种常见的图形，也是前端开发中常用的一种技巧。 在前端开发中，有时需要添加边框到CSS三角形中，以便视觉效果更加突出和美观。 在本文中，我们将介绍如何使用 CSS 创建一个带有边框的三角形。

代码示例：
.triangle {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
  border-top: 50px solid red;
  position: relative;
}

.triangle::before {
  content: ';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid white;
  border-left: 50px solid transparent;
  border-top: 50px solid white;
}

.triangle::after {
  content: ';
  position: absolute;
  top: -52px;
  left: -52px;
  width: 0;
  height: 0;
  border-right: 54px solid transparent;
  border-bottom: 54px solid red;
  border-left: 54px solid transparent;
  border-top: 54px solid red;
} 

上述代码中的三角形宽为100px，高为100px，使用 border 来绘制其四边。为了使三角形带有边框，可以使用伪元素来创建两个额外的三角形，一个放在三角形前面，一个放在三角形后面，前一个用于覆盖边框的一部分，后一个用于让边框外露。

前面的三角形设置成白色，用于覆盖三角形前面一部分边框，并调整上方位置，以使其看起来和三角形的指向一致。后面的三角形设置成红色，用于显示三角形的外部边框，同样需要调整位置和大小，来实现完美的效果。

以上便是CSS绘制带有边框的三角形的方法，通过巧妙使用伪元素，可以实现各种形状的三角形，并且可以带有不同的边框，实现更加多样化的效果。