div에서 까다로운 모양을 만들기

Question

CSS에서이 모양을 얻으 려하고 여러 가지 방법으로 시도해 보았습니다. 예를 들어 온라인에서 확인했지만 모양이 까다로운 것처럼 보입니다. 이 작업을 수행하는 방법에 대한 아이디어가있는 사람은 누구입니까? CSS 기술만으로도 가능한지 확실하지 않습니다.

감사합니다!

Answer 1

예, 가능하며 매우 간단합니다.

demo

결과 :

:

난 그냥 하나 개의 요소와 왼쪽 하단 그래서 HTML에 대한 의사를 사용하고 간단하다 :

<div class='shape'></div> 

관련 CSS는 :

.shape { 
    overflow: hidden; /* to hide the top right corner 
         of the parallelogram formed by the pseudo */ 
    position: relative; 
    width: 20em; height: 10em; /* any values really */ 
} 
.shape:before { 
    position: absolute; 
    bottom: 0; left: 0; 
    width: 150%; height: 150%; 
    transform-origin: 0 100%; 
    transform: rotate(-3deg) skewX(-10deg); 
    background: black; 
    content: ''; 
} 

당신은 CSS의 변환을 사용하여 모양의 많은를 얻을 수 있습니다. 그리고 그것들은 진짜 모양입니다. 뒤에 어떤 종류의 배경이라도 가질 수 있습니다.

Answer 2

나는

#trapezoid { 
height: 0; 
width: 120px; 
border-bottom: 80px solid #05ed08; 
border-left: 45px solid transparent; 
border-right: 5px solid transparent; 
padding: 10 8px 5 5; 
} 

Answer 3

당신은 또한 :before, :after 의사와 transform 속성을 사용할 수 있습니다 ...이 질문에 대한 완벽한 솔루션입니다 생각합니다. 여기에 example이 있습니다.

#box { 
    width: 400px; 
    height: 200px; 
    background-color: #212121; 
    position: relative; 
} 

#box:after, #box:before { 
    display: block; 
    content: "\0020"; 
    color: transparent; 
    width: 411px; 
    height: 45px; 
    background: white; 
    position: absolute; 
    bottom: -20px; 
    -moz-transform: rotate(-2deg); 
    -webkit-transform: rotate(-2deg); 
    -o-transform: rotate(-2deg); 
    -ms-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
} 
#box:before { 
    bottom: 80px; 
    left: -200px; 
    -moz-transform: rotate(92deg); 
    -webkit-transform: rotate(92deg); 
    -o-transform: rotate(92deg); 
    -ms-transform: rotate(92deg); 
    transform: rotate(92deg); 
} 

당신이 원하는 모양을 얻기 위해 일부 값을 변경해야 할 수도 있습니다.