时间戳

首页 > 解决方案 > 带有文本和边框的 CSS 梯形

css - 带有文本和边框的 CSS 梯形

问题描述

我正在尝试构建这个：类别标题梯形

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

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

你能帮我一把吗？

提前致谢。

标签： cssresponsive-designcss-shapesshapes

解决方案

这就是你可以在 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>

推荐阅读