html锯齿圆形,锯齿图形.html

.a0{width: 13em;height:4em;overflow: hidden;position: relative;line-height: 4em;text-align: center;color: #fff;}

.a1{width: 10em;height:4em;background: #669;position: absolute;top: 0;left: 0;}

.a2{width: 4em;height: 4em;background: #669;-webkit-transform: rotate(45deg);position: absolute;top: 0;left: 8em;}

.a3{width: 100px;height: 0px; border-bottom: 100px solid #0000FF;border-top: 100px solid #0000FF;border-left: 50px solid transparent;border-right: 10px solid #0000FF;}

.a4{width: 100px;height: 100px; border-bottom: 100px solid #000;border-top: 100px solid #333;border-left: 100px solid #4CAE4C;border-right: 100px solid #C7254E;}

.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }

.bg{

width:300px;

height:50px;

background:#caca8c;

background-image:-webkit-gradient(linear,50% 0,0 100%,

from(transparent),

color-stop(.5,transparent),

color-stop(.5,#d86707),

to(#d86707)

),

-webkit-gradient(linear,50% 0,100% 100%,

from(transparent),

color-stop(.5,transparent),

color-stop(.5,#d86707),

to(#d86707)

);

background-image:-moz-linear-gradient(50% 0 -45deg,

transparent,

transparent 50%,

#d86707 50%,

#d86707

),-moz-linear-gradient(50% 0 -135deg,

transparent,

transparent 50%,

#d86707 50%,

#d86707

);

/*这一段是把他分成很多个小三角形*/

background-size:30px 15px;

background-repeat:repeat-x;

background-position:0 100%;

}

第一天

一键复制

编辑

Web IDE

原始数据

按行查看

历史