CSS 中的不规则形状

Question

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

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

谢谢！马努

Answer 1

如果您觉得 border-radius 没问题，您可以通过两种方式调整每个角以获得相似的形状：

see for more information : 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>

CSS 中的不规则形状

Irregular shape in CSS

css

background

title

css-shapes