CSS 带文字和边框的梯形
CSS Trapezoid shape with text and borders
我正在尝试构建这个:Category Title Trapezoid
我需要它来响应。已经尝试使用 borders
(没有响应)、skew
、rotations
、:before
、:after
... 没有运气。
我以前可以用它来制作梯形,但是没有 3px solid black border
。
你能帮帮我吗?
提前致谢。
这就是您可以在 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>
我正在尝试构建这个:Category Title Trapezoid
我需要它来响应。已经尝试使用 borders
(没有响应)、skew
、rotations
、:before
、:after
... 没有运气。
我以前可以用它来制作梯形,但是没有 3px solid black border
。
你能帮帮我吗?
提前致谢。
这就是您可以在 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>