css3 - 这个形状使用CSS怎么写出来？

问题描述

问 题

1. 这个形状使用css3怎么写出来，我不想使用背景图实现这个效果。
   

2.右侧的圆角怎么实现？

解决方案

div {
  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转了个角度，推荐用作伪元素垫在底下

补个链接

这篇关于css3 - 这个形状使用CSS怎么写出来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！