使用CSS3在3D空间中倾斜的元素

Question

我想用CSS3制作这个倾斜/旋转的元素。

我尝试使用clip-path，但在创建形状后，我无法为其添加边框，框阴影或边框半径。

clip-path: polygon(5% 7%, 98% 0, 100% 83%, 0 74%);

我尝试使用transform，但这不仅是旋转，因为两侧有不同的方向。我也试过 SVG ，但我发现的信息不足以让我找到解决问题的方法。这是我的最后一个解决方案，如果可能的话，我宁愿使用CSS3而不是SVG ...... 任何sugestions？

Answer 1

您可以使用CSS3 https://github.com/brendangregg/perf-tools

父元素
• perspective
• transform: rotate3d(x, y, z, a)关于它的孩子

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
body{background: #2C8BF9;}



.slantedParent{
  position:relative;
  width: 300px; height:200px;
  top:10px; left:10px;
  
  perspective: 800px;
}


.slanted{
  background: #fff;
  border-radius: 32px;
  height:100%;
  padding: 32px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  
  transform: rotate3d(3, -2, 0.4, 25deg); /* play with those values */
}

<div class="slantedParent">
  <div class="slanted">
    <h1>Some content?</h1>
  </div>
</div>

Answer 2

做这样的事情。

#shape {
	  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
	height: 100px;
	-webkit-transform: skew(-10deg);
	   -moz-transform: skew(-10deg);
	     -o-transform: skew(-10deg);
	background: red;
  border-radius:5px;
  box-shadow:0px 0px 4px #000;
 border: 5px solid #eee;
}

<div id="shape"></div>