CSSの不規則な形

Question

CSSのタイトルバックグラウンドにこの赤い形を描くことができるかどうかは知っていますか？

タイトルの長さに応じて幅を変える必要があります。

ありがとうございました！ Manue

Answer 1

ボーダー半径があなたに罰金と思われる場合は、あなたがチューン似た形状を取得するには2つの方法の各コーナーがあります。

詳細については以下を参照してください以下の可能https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

例を

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>