Как адаптивно сверстать такой элемент?

Question

[DTX]

1. Надо вот это:

Голубой - полупрозрачный.

2. Мб кто знает сайты с похожими элементами, чем можно было бы вдохновиться?

Answer 1

[Ankhena]

1. Полупрозрачный голубой div, у него :after белым треугольником.

2. А еще лучше просто фон градиентом.

background: linear-gradient(135deg, #27b3c3 0%, #27b3c3 49.9%, #b8e7eb 50%, #b8e7eb 100%) no-repeat;

угол, цвета и %% укажите на свой вкус.

Comments

[DTX]

А треугольник как лучше сделать?

[Ankhena]

DTX:
apps.eky.hk/css-triangle-generator
https://habrahabr.ru/post/126207/

[DTX]

Ankhena W: Точняк, он же прямоугольный) Спасибо!

[Ankhena]

DTX: еще лучше фон всему блоку - градиентом

[DTX]

Ankhena W: Вообще отлично) Ещё бы обтекание текстом как-нибудь сделать.. Реально?

[Ankhena]

DTX: сейчас тороплюсь, не найти. Но смотреть надо вот в эту сторону: www.internet-technologies.ru/articles/article_2059.html