Как создать такую фигуру в css?

Question

[viktorulyushev]

Answer 1

[Edward]

https://jsfiddle.net/ooqqfk6e/

Answer 2

[Денис Николас]

#block {
	width: 60px; /* При повороте является высотой */
	height: 90px; /* При повороте является шириной*/
	background: #2e578e;
	position: relative;
  transform: rotate(90deg);
}
#block:before {
	content: "";
	position: absolute;
	top: -25px; /* Высота треугольника */
	left: 0;
	width: 0;
	height: 0;
	border-left: 30px solid transparent; /* Ширина верхней половины треугольника */
	border-right: 30px solid transparent; /* Ширина нижней половины треугольника */
	border-bottom: 25px solid #2e578e; /* Растяжение треугольника с точки высоты до прямоугольника*/
}

Answer 3

[devstudent]

обычный прямоугольник , у него after в виду треугольника приставить, треугольник легко сделать на Генератор треугольников

Comments

[Максим Тимофеев]

ссылка с ошибкой, вот правильная apps.eky.hk/css-triangle-generator

Answer 4

[Борис Якушев]

Гуглить по запросу "треугольник css". Решение адаптировать под себя.