Как реализовать треугольник с внутренней тенью в в web?

Question

[Андрей Фролов]

Как сделать резиновый треугольник с внутренней тенью (пример ниже).
Как понимаю на css такое нельзя, но как можно?)

Answer 1

[kidar2]

На svg попробуйте.

Answer 2

[Даниил Игоревич]

div{
			position: relative;
			width: 250px;
			height: 156px;
			-webkit-clip-path: polygon(49% 49%, 36% 100%, 64% 100%);
			clip-path: polygon(49% 49%, 36% 100%, 64% 100%);
			background: #FFC000;
		}
		div::before{
			content: '';
			position: absolute;
			top: -12px;
			left: -30px;
			display: block;
			width: 130px;
			height: 130px;
			transform: rotate(25deg);
			background: red;
			box-shadow: 10px 10px 10px black;
		}
		div::after{
			content: '';
			position: absolute;
			top: 7px;
			right: 0px;
			display: block;
			width: 130px;
			height: 130px;
			transform: rotate(-25deg);
			background: red;
			box-shadow: -12px -12px 10px black;
		}

<div></div>
Если сделать это на CSS, то можно так.(Это я сделал на скорую руку :))

Comments

[Андрей Фролов]

осталось понять как это резиновым сделать)))

[Даниил Игоревич]

Дмитрий Бородин: через media