Unstructured shape in CSS containing text

Question

I'm trying to design shape as the following screenshot I succeed to design it but the problem is I can't fill text inside it, the text always appeared after the div.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div2{
    border-top: 50px solid #555;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
    display:inline-block;
}
</style>
</head>
<body>


<div class="div2">My Text</div>
</body>
</html>

score 1 · Accepted Answer · answered Jun 13 '21 at 19:47

Your shape is a 4 sided polygon and so you can use a CSS clip-path to define the bit of the div that you want to show without the need to add extra HTML elements or use their border to create the shape.

.div2 {
  width: 125px;
  display: inline-block;
  height: auto;
  padding: 20px;
  color: white;
  background: black;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

<div class="div2">My Text</div>

Unstructured shape in CSS containing text

1 Answers1