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>