Unregelmäßige Form in CSS

Question

Weiß jemand, ob es möglich ist, diese rote Form für Titelhintergrund nur in CSS zu zeichnen?

Ich muss dies mit unterschiedlicher Breite für unterschiedliche Titellänge haben.

Vielen Dank! Manue

Answer 1

Wenn border-radius Ihnen fein scheint, können Sie stimmen jeweils Ecken auf 2 Arten gleichermaßen eine Form zu erhalten:

für weitere Informationen siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Beispiel möglich unter

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>