Как сделать подобный срез для элемента?

Question

[Александр Баранов]

Как сделать подобный срез как на картинке сверху и снизу?

Answer 1

[ex3manet]

Я так понимаю тебя интересует это??? Если да вот код, если помог ставь "+":

<div id="parallelogram"></div>

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}



#parallelogram {
    width: 300px;
    height: 120px;
    background: #343434;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
}

Comments

[Александр Баранов]

спасибо а как убрать этот маленький белый уголок?

[ex3manet]

qwertyq1488: дай ссылку на ресурс, а то картинка маленькая, ничего не понятно.

[Александр Баранов]

cssdeck.com/labs/ah6ug5km

[ex3manet]

qwertyq1488: МОжно вместо параллелограмма на 1 и 4 блок воткнуть трапецию при это убрав 1 параметр: почитай тут htmlhook.ru/figury-css3.html
ну чтоб типа с одной стороны были прямые углы, а с другой наклон.

[Александр Баранов]

спасибо большое