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

#javascript #html #css #css3 #изображения

Приветствую! Подскажите плиз, как с помощью стилей добиться таких скосов в блоках
как на картинках 1 и 2, причем, чтобы текст мог быть разной высоты - это вообще возможно
или с помощью скриптов только?





.tech,
.new {
  background: yellow;
  width: 200px;
  margin: 10px 0;
}
техника
новинки



    

Ответы

Ответ 1

Вот еще один вариант реализации этой задачи с использованием 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/


Ответ 2

Вариант для современных браузеров ( уже задавали подобные вопросы, но там были другие
фигуры, поэтому повторюсь)

Используйте css свойство clip-path. Поддерживает и треугольники, круги, квадраты,
ромбы и другие многоульники

Тут можно поиграться

Из плюсов


Очень хорошая кастомизация
Без доп элементов
Не так много кода ( с генератором вообще на раз два делается )


UPD
Для кроссбраузерности, лучше не парится и нарисовать нужные бэкграунды. В старых
браузерах по другому треугольники не сделать


Ответ 3

Доброго дня! 

Треугольник в левом верхнем углу (как фигура для "Техника спецназначения"):


#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-right: 100px solid transparent;			
}





Фигура для "Новинки":



#triangle-right {
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-left: 50px solid red;
	border-bottom: 40px solid transparent;
}




Если немного напрячь разум, можно применить эти трюки к псевдоэлементам и вообще
избавиться от дополнительных блоков в HTML.
Добавлю еще: углы регулируются шириной border-ов.

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

P.S.: Все работает при любом размере блоков



.tech,
.new {
  background: yellow;
  width: 200px;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  position: relative;
}
.tech::after {
	content: ' ';
	width: 0;
	height: 0;
	border-top: 30px solid yellow; /* равен высоте блока */
	border-right: 15px solid transparent; /* регулирует угол скоса */
	position: absolute;
	top: 0;
	left: 100%;
}
.new::after {
content: ' ';
	width: 0;
	height: 0;
	border-top: 15px solid transparent; /* половина высоты блока */
	border-left: 15px solid yellow; /* половина высоты блока */
	border-bottom: 15px solid transparent; /* регулирует угол скоса */
	position: absolute;
	top: 0;
	left: 100%;
}
техника
новинки


Ответ 4

.skos {
    height:20px;
    width:120px;
    padding-left:40px;
    background:red;
    line-height:20px;
    position:relative;
}
.skos:after{
    content:'';
    border-bottom:30px solid  transparent;
    border-right: 10px solid #fff;
    position:absolute;
    right:0; top:0;
}
/********************/
.right{
    width:120px;
    height:20px;
    margin:50px 0;
    background:red;
    position:relative;
    text-align:center;
}
.right:after{
    content:'';
    border:10px solid transparent;
    border-left:10px solid red;
    position:absolute;
    right:-20px;
    
}
menu
menu




да вроде не сложно это ! так надо ?


Ответ 5

Общими усилиями решение найдено!
Спасибо за помощь!



a {
  color: #fefefe;
  font-family: Arial, sans-serif;
}
.arrow {
  display: inline-block;
  background: #666;
  position: relative;
  font-size: 15px;
  line-height: 30px;
  padding: 0 25px;
  overflow: hidden;
  &: after, &: before {
    content: '';
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border: 50px solid transparent;
  }
}
.arrow:after {
  top: 50%;
  border-bottom: 0;
  border-right: 25px solid #fff;
}
.arrow:before {
  content: '';
  bottom: 50%;
  border-top: 0;
  border-right: 25px solid #fff;
}
Ссылка со стрелкой


Ссылка скошеный край
 Ссылка
скошеный край