css3书页卷角使用教程,css - 这个卷角的效果怎么做？

怪我咯2017-04-17 14:32:451楼

//html

//css

.form{

width:408px;

height:200px;

background:#2f2f2f;

position:relative;

overflow:hidden;

margin:30px auto;

}

.corner{

background:-webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);

background:-moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

width:90px;

height:90px;

border-radius:0 0 0px 90px / 0 0 0 30px;

-webkit-transform:rotate(-90deg);

-moz-transform:rotate(-90deg);

-o-transform:rotate(-90deg);

-ms-transform:rotate(-90deg);

transform:rotate(-90deg);

position:absolute;

left:-4px;

top:-4px;

box-shadow:5px 2px 8px black;

overflow:hidden;

}

.corner:after{

height:100%;

width:100%;

position:absolute;

content:"";

top:-15px;

left:-82px;

border-radius:90px 90px 0px 0 / 40px 40px 0 0;

z-index:1;

background:#2F2F2F;

-webkit-transform:rotate(77deg);

-moz-transform:rotate(77deg);

-o-transform:rotate(77deg);

-ms-transform:rotate(77deg);

transform:rotate(77deg);

box-shadow:0px 0px 8px black inset;

}