代码如下:
html:
<div id="div3">
<div class="arrow-top"></div>
</div>
css:
#div3 {
position: relative
width: 300px
height: 200px
background-color: yellow
}
.arrow-top {
position: absolute
top: -50px
left: -50px /*移动距离为小三角的宽高*/
width: 0px
height: 0px
border-width: 50px /*小三角的高度*/
border-style: solid
border-color: transparent transparent #C73837 transparent /*朝上的小三角*/
transform: rotate(-45deg) /*将小三角旋转到你想要的角度*/
}
你可以根据自己的需要进行微调
一般都是做一个正方形的斜线纹理图比如
(图一)背景纹理的的间距大小与你所做的背景图有关,假如图一为一个6px的正方形,作为背景平铺出来的的斜线纹理间距就是5px的距离,(图二)
为一个6px的正方形,作为背景平铺出来的斜线纹理间距就是就是2px的距离,这样背景斜线纹理间距的疏密程度就得到了很好的控制(ps:一般这些背景图做个4px~8px之间的一个正方形就行了,然后background:url(../images/adfa.gif) no-petear就行了!)谢谢采纳