使用伪元素创建 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中文网其他相关文章！
