Проблема с непрямоугольным блоком

140
29 апреля 2019, 16:20

Верстаю секцию с выбором прайсингов в данный момент по макету (скриншот приложил).
Идея в том, что при наведении на каждый из блоков через mouseover/mouseout меняются стили конкретных свойств как самих блоков, так и дочерних элементов.

Проблема заключается в той части, где расположена цена. По сути это два дива, нижний в форме перевернутого треугольника.
Верхний получается залить градиентом без проблем, со вторым не знаю как быть. Через background и border-color не работает.

Подскажите, как здесь лучше выйти из ситуации? Может можно как то по другому сверстать кусок с ценой или же можно ровно и красиво сделать градиент у блока такого типа через свойства? P.S. на втором скрине то, как это сейчас выглядит

Треугольник делался по такому методу

    #triangle-down { 
    	width: 0; 
    	height: 0; 
    	border-left: 50px solid transparent; 
    	border-right: 50px solid transparent; 
    	border-top: 100px solid red; 
    }
<body> 
  <div id="triangle-down"></div> 
</body>

P.S.В итоге сделал через бэкграунд свгшками. Так показалось проще.

Answer 1

#triangle-down { 
	background: rgba(255,0,132,1); 
	background: -moz-linear-gradient(left, rgba(255,0,132,1) 0%, rgba(22,133,22,1) 29%, rgba(22,133,22,1) 35%, rgba(22,32,133,1) 44%, rgba(22,133,22,1) 80%, rgba(255,0,132,1) 100%); 
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,0,132,1)), color-stop(29%, rgba(22,133,22,1)), color-stop(35%, rgba(22,133,22,1)), color-stop(44%, rgba(22,32,133,1)), color-stop(80%, rgba(22,133,22,1)), color-stop(100%, rgba(255,0,132,1))); 
	background: -webkit-linear-gradient(left, rgba(255,0,132,1) 0%, rgba(22,133,22,1) 29%, rgba(22,133,22,1) 35%, rgba(22,32,133,1) 44%, rgba(22,133,22,1) 80%, rgba(255,0,132,1) 100%); 
	background: -o-linear-gradient(left, rgba(255,0,132,1) 0%, rgba(22,133,22,1) 29%, rgba(22,133,22,1) 35%, rgba(22,32,133,1) 44%, rgba(22,133,22,1) 80%, rgba(255,0,132,1) 100%); 
	background: -ms-linear-gradient(left, rgba(255,0,132,1) 0%, rgba(22,133,22,1) 29%, rgba(22,133,22,1) 35%, rgba(22,32,133,1) 44%, rgba(22,133,22,1) 80%, rgba(255,0,132,1) 100%); 
	background: linear-gradient(to right, rgba(255,0,132,1) 0%, rgba(22,133,22,1) 29%, rgba(22,133,22,1) 35%, rgba(22,32,133,1) 44%, rgba(22,133,22,1) 80%, rgba(255,0,132,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0084', endColorstr='#ff0084', GradientType=1 ); 
   	height: 150px; 
   	width: 250px; 
   	position: relative; 
} 
 
#triangle-down:after , #triangle-down:before { 
	display: inline-block; 
    position: absolute; 
    content: ""; 
    height: 0px; 
    width: 0px; 
    color: red; 
    /* background-color: black; */ 
    top: 123px; 
} 
 
#triangle-down:after { 
    /* border-left: 25px solid transparent; */ 
    border-right: 125px solid transparent; 
    /* border-top: 50px solid red; */ 
    border-bottom: 75px solid #f6fafd; 
    left: 0%; 
    top: 50%; 
} 
 
#triangle-down:before { 
    border-left: 125px solid transparent; 
    /* border-right: 25px solid transparent; */ 
    /* border-top: 50px solid red; */ 
    border-bottom: 75px solid #f6fafd; 
    left: calc(100% - 125px); 
    top: 50%; 
}
	<body> 
	  <div id="triangle-down"></div> 
	</body>

Вот... накостылял кое что, с помощью after и befor, они закрывают лишнюю часть фоновым цветом, а фон triangle-down можешь ставить какой хочешь

READ ALSO
Почему гугл не видит мой сайт?
HTML

Почему гугл не видит мой сайт?

Не могу понять почему гугл не находит мой сайтПрописал ключевые слова, сделал все настройки, копирую ключевое слово в строку гугла, но он не находит

 153
Как применить функцию jquery к определенному элементу?
jQuery

Как применить функцию jquery к определенному элементу?

Задача состоит в том, чтобы при нажатие на конкретную кнопку только у нее одной появлялся класс "white-btn-active", а у той кнопки у которой класс уже...

 131
Не срабатывает функция при выборе &lt;option&gt; - ов в &lt;datalist&gt;
jQuery

Не срабатывает функция при выборе <option> - ов в <datalist>

 179
Как отлавливать строку со сканера штрих-кодов?
c#

Как отлавливать строку со сканера штрих-кодов?

Есть сканер штрих-кодов Winson WNL-5000g-USBНеобходимо реализовать приложение на C#(WPF) в котором в список будет добавляться строки считанные сканером

 145