how to create this type of shape with text inside it?

Question

I'm creating this type of shape with text inside it. but it doesn' work, can anyone help me?

i have tried this code :

.diagonal {
  width: 300px;
  height: 100px;
  background-color: green;
  transform: skewX(30deg);
  transform-origin: top;
  margin: 10px;
  /* Zentriert den Inhalt */
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagonal>span {
  transform: skewX(-30deg);
}

<div class="diagonal"><span>Diagonal</span></div>

i have tried this link to make like that shape but not found https://codepen.io/Minilexikon/pen/yVRdQY — Khuram Shahzad, Jul 17 '19 at 17:44
Have a look here : https://css-tricks.com/the-shapes-of-css/ this may get you close to what you are looking for. then you can add a .text { display: inline-block; width: 200px; position: absolute; top: -7px; left: 131px; z-index: 1; color: white; } to place your text inside the quadrilateral — tmcc, Jul 17 '19 at 18:38

score 0 · Answer 1 · answered Jul 18 '19 at 04:44

0

You can use the clip-path property to achieve this and placing all the component accordingly

here is one site to generate clip-path clip path generator

answered Jul 18 '19 at 04:44

Ashad Nasim

2,511
21
37

how to create this type of shape with text inside it?

1 Answers1