Gimir
@Gimir
JavaScript dev

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

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

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

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

Войти через центр авторизации
Похожие вопросы