css中三角 |css 元素从左向右

在CSS中创建三角形的最基本方法是使用边框和宽高属性。可以通过在一个元素上设置无边框的三个边框和一个非常小的宽度和高度来创建一个三角形。

.triangle {
width: 0;
height: 0;
border-top: 20px solid #f00;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}

上面的代码中，三个边框中的一个是非常长的边框，另外两个边框由于宽度很小所以点不见。这个边框的宽度可以通过改变`border-top`的值来调整三角形的高度。

另一个创建三角形的方法是使用伪元素，这种方法不会影响到原始的HTML标记。

.arrow {
position: relative;
}
.arrow:before {
content: "";
position: absolute;
border: 10px solid #f00;
border-color: #f00 transparent transparent transparent;
left: 0;
top: -20px;
}

上面的代码中，`:before`伪元素定义了一个用于在`.arrow`元素上的创建三角形。它使用了一个正方形的边框，然后通过使用`border-color`属性使三角形两侧变透明，从而只保留了三角形的上边框。

以上是关于CSS中三角形的两种基本的方法，这些方法可以用于创建不同的三角形，例如尖角三角形、圆角三角形等等。通过熟练理解这些方法并进行优化调整，可以轻松达到所期望的设计效果。