Как сверстать такой блок?

Question

[serj1987]

Нужно сверстать такой блок:

.bl {
    background-color: #2b4ca7;
    width: 57%;
    height: 271px;
   }

Как заострить правый край? Что бы был в виде стрелочки

Answer 1

[Eugene Chefranov]

https://codepen.io/chefranov/pen/BVgmKZ
меняйте border-left: 30px solid blue; для регулирования вытянутости конца

Answer 2

[Владимир Проскурин]

Сделать треугольник через border на :after

Answer 3

[Andrej Sharapov]

css.yoksel.ru/strelki-s-pomoshh-yu-svojstva-border
Пробуйте

Answer 4

[serj1987]

Получилось вот что:

.zak1 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 135.5px 0 135.5px 200px;
    border-color: transparent transparent transparent #2b4ca7;
}

Как это треугольник растянуть? Нужно задать width:52%
Если тянуть его через border-width, то получается вот что:

Comments

[Ankhena]

Не надо писать самому себе ответы. Для этого есть редактирование вопроса.

[Ankhena]

Пример кода у меня в ответе

[Егор Соколов]

www.cssarrowplease.com вам сюда

.zak1 {
    width: 52%;
    height: 100px;
    position: relative;
    background: #2b4ca7;
}
.zak1::before {
	content: '';
	position: absolute;
	top: 0;
	right: -100px;
	border-style: solid;
	border-width: 50px 0 50px 100px;
	border-color: transparent transparent transparent #2b4ca7;
}

либо с этим куском можете поиграться