css写下拉三角形 |css首字母缩写

.dropdown {
width: 100px;
height: 30px;
position: relative;
background-color: #fff;
}
.dropdown:after {
content: "";
display: block;
border: solid transparent;
border-width: 8px;
border-top-color: #000;
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}

在上面的例子中，大家给一个容器 .dropdown 设置了一个 position: relative 属性，并在其下方使用了一个 ::after 伪元素。通过设置伪元素的 display: block 属性并且给它一个内容（使用 content 属性），大家就能为其添加一些样式了。

在这里，大家使用了 border 属性来制作三角形。border-width 属性用来设置边框的宽度，然后用 border-top-color 来设置顶部边框的颜色，而其他三个边框设为 transparent。

通过将伪元素定位到容器的底部，并使用 left 属性和 transform 属性（translateX(-50%)）将其水平居中，大家就可以将三角形放置在容器的下方。

最后，通过调整边框的宽度和伪元素的位置，大家就可以轻松地制作不同大小和颜色的下拉三角形了。

/* 蓝色三角形 */
.dropdown-blue:after {
border-top-color: blue;
border-width: 12px;
bottom: -22px;
}
/* 红色三角形 */
.dropdown-red:after {
border-top-color: red;
border-width: 6px;
bottom: -10px;
}