Как с помощью стилей добиться треугольных скосов в блоках?

Приветствую! Подскажите плиз, как с помощью стилей добиться таких скосов в блоках как на картинках 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/