如何实现如图所示不规则DIV?

Question

本人前端小菜鸟一枚，在项目开发中遇到了这个问题。怎样实现图中不规则形状的DIV，已经尝试了svg和tansform,无耐技术太菜，目前还没做出来，期待前端大哥帮忙解决这个问题。
技术要求：
1.div圆角；
2.内容充填div，超出部分隐藏；
3.宽度高度能用百分比做单位

感激不尽！

Answer 1

svg和canvas用来绘图的，不能作为容器来放置内容。所以这个形状可以使用css3的新属性clip-path来做，代码：
clip-path: polygon(0% 0%, 100% 4.7%, 100% 97.6%, 0% 100%);
参考文章：https://www.cnblogs.com/pizit...
但是clip-path不支持边框以及圆角，甚至不兼容IE和edge浏览器。所以最终采用了css3的transform属性。还好div的变形幅度不大，简单的做了一下旋转、缩放以及位移，初步地完成图示效果。只是div内容会有相应的倾斜缩放效果。代码：

  transform: perspective(.89em) rotatey(-0.14deg) translate(-3.5%);
  border: 1px solid #3383f4;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;

效果：

Answer 2

描述不清不楚