3D space 和 CSS3 中的倾斜元素

Question

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

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

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

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

Answer 1

做这样的事情。

#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>

Answer 2

您可以使用 CSS3 rotate3d^MDN

perspective 在 parent 元素上
transform: rotate3d(x, y, z, a) 在 child

/*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>

3D space 和 CSS3 中的倾斜元素

Slanted element in 3D space with CSS3

html

css

shapes