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>