Как слушать музыку вконтактеiphone ipad cellular в режиме модемаОтключить дополнительные пакеты интернет МТСАмедиатека списывает деньги с номера МТСЗапустил группу вконтакте

Блоки с нестандартными формами

Подробную статью можно прочитать тут: https://www.frontender.info/css-shapes/

Создаём блок внутри которого будет ещё 2 блока. Позиционируем блоки по левому краю.

Первый блок станет основой для блока который в дальнейшем будет обтекать текст Задаём ему ширину и высоту. Дальше задаём блоку полигон через CSS. Существует два типа команд для расположения полигона: shape-outside и clip-path.

clip-path - Является видимой областью, текст будет проходить сквозь него, зато вы можете увидеть объект добавив к блоку к примеру фон(для удобства можно использовать полупрозрачность.). Точки  полигона располагаются по часовой стрелке и используют параметры родительского блока. К примеру если у нас родительский блок 500 на 500 пикселей и вам хочется посмотреть как располагать блоки в живую обратите внимание на этот код:

background: rgba(155,155,155,0.4);
clip-path: polygon(0px 0px, 350px 150px, 500px 500px, 0px 500px);
width: 500px;
height: 500px;

Я располагаю точки самостоятельно, создаю блоки и в редакторе постепенно записываю координаты, смотря как изменяется мой блок на экране.

Если вы хотите чтобы текст обтекал этот блок, но вам не обязательно чтобы он был виден на экране можете просто использовать код(обратите внимание на то что полигон остался тот же самый):

background: rgba(155,155,155,0.4);
shape-outside: polygon(0px 0px, 350px 150px, 500px 500px, 0px 500px);
width: 500px;
height: 500px;

Второй блок будет содержать контент. Именно сюда и добавляем контент.