css制作三角形，下拉框三角形

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

网站制作 中常常需要下拉框，而如果下拉框如果只是单纯的矩形则会显得太过单调，所以这次教大家利用css制作三角形放在矩形上面

首先利用css制作三角形

    div {

        width:0px;

        height:0px;

        border-top:20px solid transparent;

        border-left:20px solid transparent;

        border-right:20px solid transparent;

        border-bottom:20px solid green;

       }

<div></div>

然后就是将这个三角形放到矩形上面注意这里如果想要箭头朝向哪边就将哪边的颜色显示，其余用透明就行

div {

    width:150px;

    height:150px;

    position:relative;

    margin:50px auto;

}

div p {

    border:1px solid #000;

    width:100px;

    height:100px;

}

div span {

    display:block;

    width:0px;

    height:0px;

    border-top:20px solid transparent;

    border-left:20px solid transparent;

    border-right:20px solid transparent;

    border-bottom:20px solid black;

    position:absolute;

    top:-40px;

    left:;

}

div span.blank {

    border-top:19px solid transparent;

    border-left:19px solid transparent;

    border-right:19px solid transparent;

    border-bottom:19px solid white;

    top:-37px;

    left:1px;

}