如何使用CSS3绘制以下形状

Question

我想使用CSS3绘制以下形状，因为我需要将文本放入其中。

尝试制作的形状如下图所示。

我从未使用CSS绘制形状，所以不确定如何去做。

更新

上传的新形状意外上传了错误的形状，它需要沿底部有一条线

Answer 1

检查The Shapes of CSS，它是使用CSS创建的许多类型形状的绝佳来源。

我已经为您创建了JSFiddle并获得了预期的结果。

.full-width-wrap {
  width: 100%;
  border-bottom: 1px solid red;
}

.shaped {
  line-height: 1.5em;
  border-bottom: 1.5em solid red;
  border-right: 50px solid transparent;
  height: 0;
  width: 300px;
}

<div class="full-width-wrap">
    <div class="shaped">
      Some text
    </div>
</div>

Answer 2

一个简单的渐变可以伪造形状：

使用类几乎可以轻松地在任何地方使用：）

＆＃13;

＆＃13;

.shaped {
  background: linear-gradient(240deg, transparent 1em, #FF1B28 1em);
  padding: 0 2em 0 1em;
}
body {
  background:#333;
  }
a {
  color:white;
  text-decoration:none;
  }

＆＃13;

<h1 class="shaped"> title</h1>
<h2 class="shaped"> title</h2>
<h3 class="shaped"> title</h3>
<p class="shaped">text</p>
<nav> <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
</nav>

＆＃13;

＆＃13;

＆＃13;