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

网站制作中常常需要下拉框，而如果下拉框如果只是单纯的矩形则会显得太过单调，所以这次教大家利用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>

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

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

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:0;
}
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;
}

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

这个具体数值大家可以看情况在进行调节！

转载请注明出处：http://www.ly89.cn/detailB/34.html

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

相关推荐