How to style a title with a parallelogram background?

Question

enter image description here

I need to style my web page title like this image, Please could you help with this.

i think this [link](https://stackoverflow.com/questions/18798793/draw-angular-side-parallelogram-using-css) can help you — armin yahya, Jun 18 '21 at 05:28
see this: https://stackoverflow.com/questions/30680557/parallelogram-shape-in-css — Kuldeep Singh, Jun 18 '21 at 05:28
Does this answer your question? [parallelogram shape in css](https://stackoverflow.com/questions/30680557/parallelogram-shape-in-css) — Dominique, Jun 18 '21 at 13:47

score 1 · Accepted Answer · answered Jun 18 '21 at 07:13

I think this is it

Adjust it to your needs

#parallelogram {
  padding: 8px;
  display: inline-block;
  background: darkred;
  transform: skewX(-30deg);
  }
#text {
  transform: initial;
  color: white;
  transform: skewX(30deg);
}

<div id="parallelogram">
  <div id="text">
    Coding practice
  </div>
</div>

How to style a title with a parallelogram background?

1 Answers1