CSS - 創建複雜的形狀

Question

有什麼簡單的方法使用CSS來製作這個形狀？

Answer 1

您可以使用rotateX()和perspective()像這樣創建的形狀。

.shape { 
 
    width: 250px; 
 
    height: 70px; 
 
    border: 2px solid black; 
 
    border-top: 1px solid black; 
 
    margin: 50px; 
 
    transform: perspective(10px) rotateX(-2deg); 
 
}

<div class="shape"></div>

Answer 2

是的，它可以做到。看下面的代碼。

.shape { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #000; 
 
    margin: 20px 150px; 
 
    position: relative; 
 
} 
 

 
.shape:after { 
 
     content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000000; 
 
    border-bottom: 50px solid #fff; 
 
    border-left: 50px solid #000000; 
 
    border-right: 50px solid #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -99px; 
 
} 
 

 
.shape:before { 
 
     content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000000; 
 
    border-bottom: 50px solid #fff; 
 
    border-left: 50px solid #fff; 
 
    border-right: 50px solid #000000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -99px; 
 
}

<div class="shape"></div>