带有文本和边框的CSS梯形形状[重复]答案

【问题标题】：CSS Trapezoid shape with text and borders [duplicate]带有文本和边框的CSS梯形形状[重复]
【发布时间】：2020-05-13 22:39:10
【问题描述】：

我正在尝试构建这个：Category Title Trapezoid

我需要它来响应。已经尝试使用borders（没有响应）、skew、rotations、:before、:after... 没有运气。

我以前可以使用梯形制作梯形，但没有3px solid black border。

你能帮帮我吗？

提前致谢。

【问题讨论】：

向我们展示您尝试过的方法，但坦率地说，SVG 将是最简单的方法。
副本给出了一个更复杂的情况，但它包含你想要的部分

标签： css responsive-design css-shapes shapes

【解决方案1】：

这就是你可以在 SVG 上做到的方式

<svg viewBox="0 0 624 55" xmlns="http://www.w3.org/2000/svg">
  <path d="M9,10 609,10 609,26 10,45z"  fill="#0894CC" stroke="#000" stroke-width="2"/>
  <text x="30" y="33" style="font-family: sans-serif; font-size: 16px; fill: #fff; text-transform: uppercase;font-weight: 700;">destacados</text>
</svg>

【讨论】：