CSS Trapezoid shape with text and borders

Question

I'm trying to build this: Category Title Trapezoid

I need it to be responsive. Already tried with borders (wich are not responsive), skew, rotations, :before, :after... with no luck.

I was able to make the trapezoid using before, but without the 3px solid black border.

Can you please give me a hand?

Thanks in advance.

Sow us what you have tried but frankly an SVG would be the simplest method. — Paulie_D, May 13 '20 at 14:22
the duplicate give a more complex case but it contain the part you want — Temani Afif, May 13 '20 at 14:29

score 0 · Accepted Answer · answered May 13 '20 at 14:39

That's how you can do it on SVG

<svg viewBox="0 0 624 55" xmlns="http://www.w3.org/2000/svg">
  <path d="M9,10 609,10 609,26 10,45z"  fill="#0894CC" stroke="#000" stroke-width="2"/>
  <text x="30" y="33" style="font-family: sans-serif; font-size: 16px; fill: #fff; text-transform: uppercase;font-weight: 700;">destacados</text>
</svg>

CSS Trapezoid shape with text and borders

1 Answers1