如何在 CSS 中创建带边框的透明三角形？

使用 CSS 创建带边框的透明三角形

CSS 中常见的挑战之一是创建带边框的形状。一种很难创建的形状是具有可见边框的透明三角形。

传统方法

正如您在问题中提到的，一种常见的方法是使用边框创建三角形的错觉：

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

虽然此方法可以实现所需的形状，但它涉及使用边框技巧，这在某些情况下可能并不理想。

仅 WebKit 的解决方案

为了更优雅的方法，您可以使用利用 ▲ 字符的仅 WebKit 的解决方案：

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

此技术利用-webkit-text-lines 属性在字符周围创建笔划，从而形成类似三角形的形状。颜色属性设置为透明，使角色本身不可见。

以上是如何在 CSS 中创建带边框的透明三角形？的详细内容。更多信息请关注PHP中文网其他相关文章！