CSS 带文字和边框的梯形

Question

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

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

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

你能帮帮我吗？

提前致谢。

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

CSS 带文字和边框的梯形

CSS Trapezoid shape with text and borders

css

responsive-design

css-shapes

shapes