CSS中的不规则形状

Question

有人知道是否可以在CSS中为标题背景绘制这个红色形状？

我需要为不同的标题长度设置不同的宽度。

谢谢！ Manue

Answer 1

如果border-radius看起来很好，你可以通过两种方式调整每个角落以获得相同的形状：

  

有关详细信息，请参阅：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>