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

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

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

Я сделал с помощью псевдоэлементов и дива с нулевыми размерами и бордером определенного размера. Если в случае с одним размером угла это работало, то с разными размерами не очень, так как приходится очень долго подгонять угол под края, крутить див с бордером и псевдоэлементы. Может есть лучшее решение этой проблеме?
  • Вопрос задан
  • 310 просмотров
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 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend-стажер React
Студия Oxem • Москва
от 20 000 до 80 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помощь с парсингом XML файла яндекс товаров
19 апр. 2024, в 09:46
500 руб./за проект
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Ещё заказы