为什么我的 CSS 伪元素三角形形状错误？

使用伪元素创建 HTML/CSS 三角形

尝试使用伪元素创建三角形时，您会遇到不正确的输出。您观察到的是不需要的形状，而不是所需的形状。

要解决此问题，了解与边框使用相关的根本原因至关重要。请参阅提供的有关 CSS 三角形如何工作的链接，您将更深入地了解边框行为及其对输出的影响。

有效创建三角形的替代解决方案涉及使用旋转和边框。方法如下：

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

<div class="box"></div>

此方法将旋转的伪元素与边框结合起来以生成所需的三角形。指定的旋转角度决定了三角形的方向。

以上是为什么我的 CSS 伪元素三角形形状错误？的详细内容。更多信息请关注PHP中文网其他相关文章！