三角形里面的CSS三角形？

Question

我正在尝试为三角形创建一个类似边框的效果。我试过给它一个边框，盒子阴影，都不行。然后，如果你在其中放入另一个三角形div，外部三角形就会变大。

#triangle {
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #000 transparent transparent;
}

Answer 1

尝试使用像:after这样的伪元素。

你走了！

#triangle {
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #000 transparent transparent;
  width: 0;
  position: relative;
}
#triangle:after {
  content: ' ';
  position: absolute;
  border-style: solid;
  border-width: 13px 25px 13px 0;
  border-color: transparent red transparent transparent;
  width: 0;
  top: -13px;
  left: 17px;
}

<div id="triangle">
</div>