Блог

Главная - Вопросы по программированию - Div Пентагона с динамическим текстом внутри

Div Пентагона с динамическим текстом внутри

#html #css #css-shapes #clip-path

Вопрос:

Наткнулся на немного сложное требование, для которого требуется контейнер с треугольной стороной справа, которая расширяется в зависимости от того, что внутри, и у нее должны быть закругленные углы. Это то, что мне удалось сделать:

Скрипка

 .b {
  background-color:red;
  border-radius: 10px;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  padding: 20px;
}

.a {
  width: 200px;
  border: 1px solid black;
} 
 <div class="a">
<div class="b">
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
</div>
</div>

как вы можете сравнить с желаемым результатом, он почти такой же, за исключением закругленных углов справа.

введите описание изображения здесь

Ответ №1:

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

 clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);
 
 .b {
  background-color:red;
  border-radius: 10px;
  clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);
  padding: 20px;
}

.a {
  width: 200px;
  border: 1px solid black;
} 
 <div class="a">
<div class="b">
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
</div>
</div>
Метки: