利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变,不用担心使用图片失真等问题。
需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来
transparent表示透明
小三角:
HTML结构
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
CSS样式
div {
width: 0px;
height: 0px;
}
.left {
border-width: 20px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.top {
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparen