Pentagon div with dynamic text inside

user_3883393 0
Viewed 109

Stumbled across a bit complicated requirement which requires a container with a triangular side on the right which expands depending on what's inside and it should have a rounded corners. This is what I've managed to do:

Fiddle

.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>

as you can compare with the desired output, it is almost same except for the rounded corners on the right.

enter image description here

clip-path css-shapes css html
1 Answers

It is all about to play with the horizontal and vertical percentage of clip path given. I have updated your clip path like below and ended with some curved shape.

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>

user_36070640
Related