Задать вопрос
Gimir
@Gimir
JavaScript dev
верстка

Как лучше сделать div с выпуклым углом?

5f2927df99a9b099831114.png
Вот такой контейнер нужно сделать, внутри будет текст, нужна возможность задавать разные отступы, размер текста, цвет рамки и бекграунда а так же размер выпуклого угла - чем больше див, тем больше угол. А да, еще расположение, правый угол или левый.

Я сделал с помощью псевдоэлементов и дива с нулевыми размерами и бордером определенного размера. Если в случае с одним размером угла это работало, то с разными размерами не очень, так как приходится очень долго подгонять угол под края, крутить див с бордером и псевдоэлементы. Может есть лучшее решение этой проблеме?
  • Вопрос задан
  • 367 просмотров
2 комментария
Подписаться 2 Простой 2 комментария
Решения вопроса 1
cesnokov
@cesnokov
<head>&nbsp;</head> 
<html>
<head>
<style type="text/css">
	.xxx {
	    width: 500px;
	    height: 300px;
	    background-color: #fff;
	    color: #000;
	    border: 2px solid #336699;
	    padding: 20px;
	    position: relative;
	}
	.xxx::before {
	    content: "";
	    width: 0px;
	    height: 0px;
	    position: absolute;
	    border-left: 42px solid #336699;
	    border-right: 42px solid transparent;
	    border-top: 42px solid #336699;
	    border-bottom: 42px solid transparent;
	    left: -2px;
	    bottom: -85px;
	}
	.xxx::after {
	    content: "";
	    width: 0px;
	    height: 0px;
	    position: absolute;
	    border-left: 40px solid #fff;
	    border-right: 40px solid transparent;
	    border-top: 40px solid #fff;
	    border-bottom: 40px solid transparent;
	    left: 0px;
	    bottom: -80px;
	}
</style>
</head>
<body>
	<div class="xxx">xxx</div>
</body>
</html>


5f292fc0aed92963901784.jpeg
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Контент-менеджер с навыками веб-разработки и чувством стиля
ULHC • Москва
До 70 000 ₽
Frontend разработчик (React) One Day Offer
Ревамп АйТи
До 40 000 ₽
Фулстек разработчик (FullStack Developer)
Tadam
от 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать АПК файл из исходников
11 янв. 2025, в 05:30
1000 руб./за проект
Проконсультировать и Настроить GA4 через GTM, режим согласия
10 янв. 2025, в 23:46
2000 руб./в час
Разработать контент-план на месяц
10 янв. 2025, в 20:43
5000 руб./за проект
Ещё заказы