Search code examples
cssbackgroundtitlecss-shapes

Irregular shape in CSS

Does anyone know if it's possible to draw this red shape for title background in CSS only ? red shape in css ?

I need to have this with different width for different title lenght.

Thank you ! Manue

Solution

  • If border-radius seems fine to you, you may tune each corners in 2 ways to get a shape alike :

    see for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

    example possible below

    h1 {
  display: table;
  margin: 0.1em auto;
  font-size: 45px;
  font-family: cursive;
  text-transform: uppercase;
  padding: 0.25em 0.5em;
  background: #D71E19;
  color: white;
  /* below the values you want to tune to round and cut off corners */
  border-radius: 0.75em 0.5em 0.65em 0.5em / 25px 22px 100px 50px;
  }
h1 + h1 {
  /* borders or shadow will follow the shape edge */
  margin-top:10px;
  box-shadow:0 0 0 4px pink, 0 0  4px 3px black, inset 0 0 2px black;
  text-shadow:1px 1px 2px gray, -1px -1px 2px #333;
}
    <h1>Title experiment</h1>
<h1>shadow & border</h1>