Формирование сложной формы на 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); 
} 

Вы, возможно, придется изменить некоторые значения, чтобы получить нужную форму.