Как сделать такую фигуру на css?

Question

[Анатолий Пажин]

есть код
<div class="content__right"></div>

.content__right{
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 30px solid #D8E7F5;
	border-right: 30px solid #D8E7F5;
	border-bottom: 30px solid #D8E7F5;
	border-left: 30px solid #D8E7F5;
	position: relative;

	&:after{
		content: "";
		display: inline-block;
		width: 40px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: -20px;
		margin-top: -20px;
		background-color: #353140;;

	}
}

не могу понять как тут извернуться
Сделать нужно принципиально на css, я бы с радостью img пихнул.
ссылки на хабр не кидайте, я там уже облазил все

Comments

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

Как сделать такую фигуру на css?

А почему именно на css? Есть смысл?
И, сорри, но у Вас несколько фигур на картинке. Какую именно?

[Анатолий Пажин]

уточнил

[Ярослав Иванов]

Анатолий Пажин: Таки зачем ? png чем не устроило ?

[Ankhena]

Эммм...
Берем блок квадратиком, делаем ему 4 разных бордера.
Дальше берем after, делаем его на всю ширину блока с бордерами, множественным фоном градиентами рисуем черный каркас.

Целесообразность сомнительна.

Может все таки svg?

[Анатолий Пажин]

Уговорили, буду пробовать через svg)

Answer 1

[zooks]

Сложные фигуры добавляются через SVG. Затем в стилях задаете как background и позиционируете куда вам угодно.