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 style="text-align: left;"><pre name="code" class="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;
}

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

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