Приветствую! Подскажите плиз, как с помощью стилей добиться таких скосов в блоках как на картинках 1 и 2, причем, чтобы текст мог быть разной высоты - это вообще возможно или с помощью скриптов только?
.tech,
.new {
background: yellow;
width: 200px;
margin: 10px 0;
}
Ответ
Вот еще один вариант реализации этой задачи с использованием transform: skew (у тестовых примеров, фигуры подсвечены красным для ясности):
.item {
position: relative;
display: inline-block;
background: #000;
color: #fff;
padding: 5px 25px;
margin: 0 10px 10px 0;
}
.has_right_arr:after {
position: absolute;
display: block;
content: '';
top: 0;
right: -7px;
width: 20px;
height: 50%;
background: #000;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.has_right_arr:before {
position: absolute;
display: block;
content: '';
bottom: 0;
right: -7px;
width: 20px;
height: 50%;
background: #000;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.has_right_skew:after {
position: absolute;
display: block;
content: '';
bottom: 0;
right: -7px;
width: 20px;
height: 100%;
background: #000;
-ms-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
.debug:after {
background: rgba(255, 0, 0, 0.5);
}
.debug:before {
background: rgba(255, 0, 0, 0.5);
}
Hello world! Debug
Hello everyone! Debug
Hello world!
Hello everyone!
Фиддл: http://jsfiddle.net/IonDen/ey4zek1e/
