CSS에서 비대칭 모양을 만들 수 있습니까

Question

나는 반응이 좋은 내용 영역을 가진 4 가지 모양을 만들려고합니다. 예제 이미지 Heres -

svg를 사용하지 않고 이런 4 개의 컨테이너를 만들 수 있습니까? 컨테이너 안의 삼각형 모양을 만들고 절대 오른쪽 상단에 배치 할 수 있지만 다음 모양 (오른쪽으로 띄우기)이 더 높은 z- 색인이 필요하다는 것을 이해합니다.

모두 지저분 해 보인다.

Answer 1

이 효과를 얻으려면 다양한 방법이 있습니다. 왼쪽 오른쪽 divs를 밀어 divs

사용 상대적인 위치 오른쪽 각도 변경

• 사용 transform: skew 그래서 그들은 좌측 중첩 :

  하나의 방법은 ::after 가상 엘레멘트 divs

• 사용 오른쪽의 우측을 숨기 divs

작업 예 :

body { 
 
width: 200vw; 
 
} 
 

 
div { 
 
float: left; 
 
width: 400px; 
 
height: 90px; 
 
border-left: 3px solid rgb(255,255,255); 
 
border-bottom: 3px solid rgb(255,255,255); 
 
} 
 

 
div:nth-of-type(3) { 
 
clear: left; 
 
} 
 

 
div:nth-of-type(even) { 
 
position: relative; 
 
transform:skew(315deg); 
 
} 
 

 
div:nth-of-type(even)::after { 
 
content: ''; 
 
display:block; 
 
position: absolute; 
 
top:0; 
 
height:90px; 
 
background-color:rgb(255,255,255); 
 
transform:skew(-315deg); 
 
} 
 

 
div:nth-of-type(1) { 
 
background-color:rgb(149,117,117); 
 
} 
 

 
div:nth-of-type(2) { 
 
left: -67px; 
 
background-color:rgb(117,149,117); 
 
} 
 

 
div:nth-of-type(3) { 
 
background-color:rgb(117,133,149); 
 
} 
 

 
div:nth-of-type(4) { 
 
left: -160px; 
 
background-color:rgb(149,117,149); 
 
} 
 

 
div:nth-of-type(2)::after { 
 
width:228px; 
 
right:-60px; 
 
} 
 

 
div:nth-of-type(4)::after { 
 
width:150px; 
 
right:-75px; 
 
} 
 

 
div p { 
 
height: 90px; 
 
margin: 0; 
 
padding: 0 24px; 
 
line-height: 90px; 
 
font-size: 33px; 
 
color: rgb(255,255,255); 
 
} 
 

 
div:nth-of-type(even) p { 
 
transform: skew(-315deg); 
 
}

<div><p>one</p></div> 
 
<div><p>two</p></div> 
 
<div><p>three</p></div> 
 
<div><p>four</p></div>