html 图片变梯形拉伸,css3如何实现图中的梯形。

慕姐4208626
图好模糊,没看清楚,我大概写了一下.t{ width:100px; height:50px; margin: 50px; text-align:center; color:#fff; line-height:50px; background-color:red; position:relative;}.t:before{ content:''; display:block; width:35px; height:50px; position:absolute; transform:skewX(-30deg); background:red; border-top-left-radius:8px; left:-20px; top:0;}.t:after{ content:''; display:block; width:35px; height:50px; position:absolute; transform:skewX(30deg); background:red; border-top-right-radius:8px; top:0; right:-20px;}利用before和after来做两个斜边部分,利用skew来倾斜,利用定位来处理位置,我看到图中主要是两边顶部有圆角,那么再利用border-radius来调整, 不知道这个符合题主的要求不?
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
