利用css制作三角形

学习前端过程中，遇到小小难点：下拉框，在此记录一下。

下面是利用css制作一个 三角形

 .box{
            border: 20px transparent solid;
            display: block;
            width: 0;
            height: 0;
            border-top: none;
            border-color: transparent transparent black transparent;
        }

效果就是这样：

可以通过调节border改变三角形的大小。

然后，做一个简单的下拉框，可以使用到这个三角形：

<div class="box1">
        <ul>
            <a href="#">
                <li>有一个下拉框
                    <div class="blue">下拉框来啦</div>
                </li>
            </a>
        </ul>
    </div>

 .box1 {
            background-color: rgb(109, 99, 92);
            height: 40px;
            line-height: 40px;
            width: auto;
        }
        .box1 ul a{
            color: #fff;
        }
        .box1 ul li{
            float: left;
            margin: 0 300px;
            position: relative;
        }
        .box1 ul li:hover{
            color:rgb(158, 158, 243) ;
        }
        .box1 ul li .blue{
            color: #fff;
            font-size: 14px;
            text-align: center;
            width: 100px;
            height: 100px;
            background-color: rgb(158, 158, 243);
            /* 设置一个阴影 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            /* 设置下拉框在文字的正下方 */
            position:absolute;
            left: -2px;
            display: none;
        }
        /*设置小三角形  */
        .box1 ul li::after{
            content: '';
            border: 10px solid transparent;
            border-color: transparent ;
            border-bottom-color:  rgb(158, 158, 243);
            border-top: none;
            position: absolute;
            left: 39px;
            top:30px;
            /* 设置隐藏 */
            display: none;
        }
         /* 设置为鼠标放到导航栏时出现下拉框 */
        .box1 ul:hover li .blue,
        .box1 ul:hover li::after{
            display: block;
        }

效果如图：

这样就可以做成一个简单的下拉框~