Как скомбинировать divs с css

Question

У меня есть div, и мне интересно, как я могу слегка наклонить нижнюю и правую сторону.

Я могу создать треугольники и согнуть все стороны, просто не уверен, как согнуть две стороны.

Возможно ли это? Благодарю.

Answer 1

Возможно, вы сможете сделать это, используя :before и :after Селекторы CSS. Я просто взвесил пример.

JSFiddle

HTML:

<div class="slanted"></div> 

CSS:

.slanted { 
    position: relative; 
    height: 200px; 
    width: 380px; 
    min-width: 380px; 
    max-width: 380px; 
    background: #000; 
} 

.slanted:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-right: 180px solid #000; 
    border-top: 100px solid #000; 
    border-bottom: 100px solid #fff; /* page background color */ 
} 

.slanted:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-left: 200px solid #000; 
    border-bottom: 200px solid #fff; /* page background color */ 
} 

Answer 2

В более поздних версиях браузеров, вы можете использовать CSS преобразования.

Этот код будет перекос в DIV:

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); 
-o-transform: matrix(1, 0, 0.6, 1, 250, 0); 
transform: matrix(1, 0, 0.6, 1, 250, 0); 

Результат будет выглядеть примерно так:

JSFiddle

Разработчик сети Mozilla имеет an article, который говорит больше о различных преобразованиях вы можете подать заявку. Он также имеет несколько примеров и имеет details about browser compatibility.