創建形狀與CSS梯度

Question

我們如何創建CSS漸變，如附加的圖像的響應形狀。

Answer 1

我添加了一個例子HTML和CSS這樣做。這當然只是一種做法。

div{ 
 
    
 
    height: 15px; 
 
    
 
    width: 50%; 
 
    
 
    background-color: black; 
 
    
 
    position: absolute; 
 
    
 
    top: 0; 
 
    
 
} 
 

 
.left{ 
 
    
 
    transform-origin: top right; 
 
    transform: rotate(-5deg); 
 
    
 
} 
 

 
.right{ 
 
    
 
    left: 50%; 
 
    
 
    transform-origin: top left; 
 
    transform: rotate(5deg); 
 
    
 
}

<div class="left"></div> 
 
<div class="right"></div>