【问题标题】：How to draw the following shape using CSS3 [duplicate]如何使用CSS3绘制以下形状[重复]
【发布时间】：2016-03-30 21:25:28
【问题描述】：

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

我尝试创建的形状如下图所示。

我从来没有使用 CSS 绘制过形状，所以不知道该怎么做。

更新

新上传的形状不小心上传了错误的形状，它需要在底部有一条线

【问题讨论】：

标签： html css shape css-shapes

【解决方案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>

【讨论】：

非常感谢 :) 有史以来最快的回答！
大坝！我实际上上传了错误的图片，我现在用正确的形状更新了问题。谢谢
更新了我的答案。
你快点 :) 非常感谢！

【解决方案2】：

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

使用一个类几乎可以在任何地方轻松使用 :)

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

<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>

【讨论】：