84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
这个形状使用css3怎么写出来,我不想使用背景图实现这个效果。
2.右侧的圆角怎么实现?
人生最曼妙的风景,竟是内心的淡定与从容!
p { width: 200px; height: 100px; border-radius: 0 20px 30px 0; background: #ccc; transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom left; }
差不多这意思吧,用transform转了个角度,推荐用作伪元素垫在底下
补个链接
p{ width:300px; height:50px; border-radius: 5px; background-color: #da8; transform: skew(15deg,0); }
自己补充一些厂商前缀,如果要兼容的话
transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */
skew 这个参数,前面都是前缀
差不多这意思吧,用transform转了个角度,推荐用作伪元素垫在底下
补个链接
自己补充一些厂商前缀,如果要兼容的话
skew 这个参数,前面都是前缀