border做箭头的例子


<style>
.test{
margin:0 auto;
width:100px;
height:100px;
background:lightskyblue;
position:relative;
}
.arrow{
position:absolute;
bottom:0px;
top:0;
left:-140px;
right:0;
margin:auto;
width:0;
height:0;
border-right:10px solid black;
border-left:10px solid transparent;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
}
</style>

<
div class="test"> <div class="arrow"></div> </div>

最终效果:

posted @ 2017-01-09 15:39  不要叫我程序员  阅读(1242)  评论(0)    收藏  举报