與CSS3的3D空間中的傾斜元素

我試着clip-path但創建的形狀後，我不能添加邊框，箱陰影和邊界半徑它。

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

我試着transform，但這不僅是旋轉的，因爲雙方有不同的取向。我也嘗試過使用SVG，但是我發現的信息不足以幫助我找到解決問題的方法。這是我最後的解決方案，我寧願使用CSS3而不是SVG，如果可能的話...
任何消息？

來源

2017-05-29 Andrew

您可以使用CSS3 rotate3d^MDN

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>

來源

2017-05-29 05:45:15

-1

做這樣的事情。

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

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

來源

2017-05-29 05:21:53

Thanks！但是我的邊緣不是平行的，它們在所有座標（北，南...）上都有不同的傾斜。我的對象不是平行四邊形。 – Andrew

然後，您將使用CSS的旋轉屬性。 –

與CSS3的3D空間中的傾斜元素

回答

相關問題