css中的三角 |css 单击事件 函数

CSS中的三角是网页设计中非常常见的元素，它可以作为指向某个方向的箭头，也可以作为折叠展开的指示符等等。三角的实现方法有多种，本文将介绍其中几种最常用的实现方式。

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}

通过三个border实现三角，其中左右两边的border是透明的，底部的border则是实现三角形的。可以根据需要调整border的宽度和颜色来定制不同的三角。

.arrow-down:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
}

通过:before或:after伪元素实现三角，与通过border实现类似。不同点是使用了伪元素来创建三角形，而不是直接在元素上创建三角形。注意要设置伪元素的content属性，可以为空内容，但不能为空。

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #000;
transform: rotate(90deg);
}

通过将一个矩形旋转来实现三角，其中三个边是透明的，被旋转的一条边就是实现三角形的。可以根据需要调整旋转角度、边的宽度和颜色来定制不同的三角。

以上是实现三角形的几种方法，可以根据实际需求选择不同的实现方式。当然，还有其他的实现方式，比如通过svg等。下次大家将再继续探讨。