html5锥形,html – 使用CSS的锥形div

html5锥形,html – 使用CSS的锥形div

这

can be achieved与

transparent border！

CSS

#test1 {

border-top: 100px solid red;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

width: 300px;

}

#test2 {

border-top: 100px solid red;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

#test3 {

border-top: 100px solid red;

border-right: 50px solid transparent;

height: 100px;

width: 100px;

content: 'ds';

z-index: -1; /* make it the background */

}

#test3 .content {

position: relative;

top: -100px;

margin: 5px;

float: left; /* wrap the text */

clear: left; /* for demo */

font-size: 1em;

background-color: cyan;

}

HTML

Watch for the

new lines.

Do not overlap.