css下三角怎么写

在CSS中，下三角是非常常用的效果之一，可以用于制作各种指示箭头、下拉菜单等效果。下面介绍一下如何实现css下三角。

首先，我们需要在HTML页面中创建一个带有css样式的div。然后，我们可以使用CSS伪类:before或:after来创建下三角形状的样式。下面是一个简单的CSS代码实现：

 /* 创建一个大小为20像素的div */
    div {
        width: 20px;
        height: 20px;
        position: relative; /* 需要设定相对定位，以便下方的:before可以绝对定位 */
    }

    /* 利用:before实现下三角 */
    div:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: 10px solid transparent; /* 边框长度，可以随意调整 */
        border-top-color: #000; /* 下三角的颜色 */
        position: absolute;
        bottom: 0;
        left: 50%; /* 水平居中 */
        transform: translateX(-50%); /* 水平位置微调 */
    } 

在上面的CSS代码中，我们设置了一个div，并使用:before伪类创建了一个下三角形状的样式。其中，content属性为空，display设置为block，使其变为一个块状元素；border属性可以调整边框的长度，而border-top-color属性设定下三角的颜色；bottom属性设置为0，让下三角紧贴底部；left属性设置为50%，以实现水平居中；最后，transform属性微调水平位置。

以上是一个使用:before伪类实现下三角的例子，我们同样可以使用:after来实现下三角效果。只需将:before 换成:after，一般是相当的。

总之，CSS下三角是非常好用又灵活的，尤其适用于一些有导航箭头需要的场景。大家可以根据实际需求，根据上面的CSS代码调整相关的属性，实现自己所需的下三角效果。