CSS 그라디언트로 모양 만들기

Question

첨부 된 이미지와 같은 CSS 그라디언트로 반응 모양을 만드는 방법.

Answer 1

나는 HTML과 CSS와 함께이 작업을 수행하는 예를 추가했습니다. 이것은 당연히 그것을하는 다만 1 가지의 방법이다.

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>