html5 + css 绘制菱形

Question

<div class="diamond">
   <div class="inner">xxxxxxxxxxxxxxxxxxx</div>
</div>

.diamond{
  width: 180px;
  height: 180px;
  transform: rotate(-45deg) skew(-30deg, -30deg);
}

.diamond .inner{
  transform: rotate(45deg) skew(30deg, 30deg);
}

这样画出来的菱形， 内部文字扭曲了， 请问有什么好的方法吗

Answer 1

实现效果如下，可以做到完成自适应尺寸

这种图形用 SVG 绘制再合适不过了，只不过需要注意自适应边框，设置边框不缩放，关键属性如下

preserveAspectRatio="none"
vector-effect="non-scaling-stroke"

完整 SVG 如下

<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 246 82" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path vector-effect="non-scaling-stroke" d="M3.16228 41L123 1.05409L242.838 41L123 80.9459L3.16228 41Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>

也可以转成 base64 ，作为背景图使用

完整代码可以查看 https://codepen.io/xboxyan/pe...