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

#javascript #html #jquery #css

Верстаю секцию с выбором прайсингов в данный момент по макету (скриншот приложил).
Идея в том, что при наведении на каждый из блоков через 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;
    }

  










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

    

Ответы

Ответ 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%;
}
	
	  

	




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