这个CSS怎么写?带斜边

html-css07

这个CSS怎么写?带斜边,第1张

代码如下:

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就行了!)谢谢采纳