Как обрезать div
как на картинке?
Свойство border-radius
не подходит, т.к. скругливает, а мне нужна ровная линия
-
обрезать то, что черным?– Jean-Claude17 фев 2016 в 13:29
-
В принципе не важно, главное чтобы эффект был тот же– Khotey Vitaliy17 фев 2016 в 13:34
-
2transform: skew?– soledar1017 фев 2016 в 13:34
Добавить комментарий
|
1 ответ
Css-треугольники вам в помощь
.black
{
background-color: black;
padding: 20px 50px 0;
width: 400px;
}
.block {
background-color: green;
padding: 10px;
position: relative;
color: #FFF;
width: 80px;
}
.block::before {
content: '';
position: absolute;
top: 0;
left: -20px;
border-style: solid;
border-width: 0 0 40px 20px;
border-color: transparent transparent green transparent;
}
.block::after {
content: '';
position: absolute;
top: 0;
right: -20px;
border-style: solid;
border-width: 0 20px 40px 0px;
border-color: transparent transparent green transparent;
}
<div class="black"> <div class="block">
Блок
</div></div>