如何仅用CSS创建带灰色边框的左侧圆弧类矩形图形？

我想要实现的图形样式如下所示：

你提供的SVG代码 #

<svg width="310" height="99" viewBox="0 0 310 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_32_991" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.0225 16.459H301.683C305.931 16.459 309.375 19.9029 309.375 24.1513V81.7227C309.375 85.971 305.931 89.415 301.683 89.415H85.4445C77.2444 95.4405 67.1196 99 56.1635 99C45.2074 99 35.0826 95.4405 26.8826 89.415H7.69232C3.44398 89.415 0 85.971 0 81.7227V24.1513C0 19.9029 3.44396 16.459 7.69231 16.459H19.3045C28.3671 6.35593 41.5231 0 56.1635 0C70.804 0 83.9599 6.35593 93.0225 16.459Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.0225 16.459H301.683C305.931 16.459 309.375 19.9029 309.375 24.1513V81.7227C309.375 85.971 305.931 89.415 301.683 89.415H85.4445C77.2444 95.4405 67.1196 99 56.1635 99C45.2074 99 35.0826 95.4405 26.8826 89.415H7.69232C3.44398 89.415 0 85.971 0 81.7227V24.1513C0 19.9029 3.44396 16.459 7.69231 16.459H19.3045C28.3671 6.35593 41.5231 0 56.1635 0C70.804 0 83.9599 6.35593 93.0225 16.459Z" fill="white"/>
<path d="M93.0225 16.459L92.2781 17.1267L92.5762 17.459H93.0225V16.459ZM85.4445 89.415V88.415H85.1166L84.8523 88.6091L85.4445 89.415ZM26.8826 89.415L27.4747 88.6091L27.2105 88.415H26.8826V89.415ZM19.3045 16.459V17.459H19.7509L20.0489 17.1267L19.3045 16.459ZM93.0225 17.459H301.683V15.459H93.0225V17.459ZM301.683 17.459C305.379 17.459 308.375 20.4552 308.375 24.1513H310.375C310.375 19.3507 306.483 15.459 301.683 15.459V17.459ZM308.375 24.1513V81.7227H310.375V24.1513H308.375ZM308.375 81.7227C308.375 85.4187 305.379 88.415 301.683 88.415V90.415C306.483 90.415 310.375 86.5233 310.375 81.7227H308.375ZM301.683 88.415H85.4445V90.415H301.683V88.415ZM84.8523 88.6091C76.8181 94.5128 66.8995 98 56.1635 98V100C67.3398 100 77.6707 96.3682 86.0366 90.2208L84.8523 88.6091ZM56.1635 98C45.4275 98 35.5089 94.5128 27.4747 88.6091L26.2904 90.2208C34.6564 96.3682 44.9873 100 56.1635 100V98ZM26.8826 88.415H7.69232V90.415H26.8826V88.415ZM7.69232 88.415C3.99626 88.415 1 85.4187 1 81.7227H-1C-1 86.5233 2.8917 90.415 7.69232 90.415V88.415ZM1 81.7227V24.1513H-1V81.7227H1ZM1 24.1513C1 20.4552 3.99625 17.459 7.69231 17.459V15.459C2.89168 15.459 -1 19.3507 -1 24.1513H1ZM7.69231 17.459H19.3045V15.459H7.69231V17.459ZM20.0489 17.1267C28.9299 7.22618 41.8189 1 56.1635 1V-1C41.2272 -1 27.8044 5.48568 18.5601 15.7912L20.0489 17.1267ZM56.1635 1C70.5081 1 83.3972 7.22618 92.2781 17.1267L93.7669 15.7912C84.5226 5.48568 71.0998 -1 56.1635 -1V1Z" fill="#D0D1D2" mask="url(#path-1-inside-1_32_991)"/>
</svg>

CSS实现方案 #

当然可以用纯CSS实现这个图形！核心思路是利用clip-path复刻图形的不规则轮廓，配合伪元素实现边缘的灰色描边效果：

<div class="custom-shape"></div>

<style>
.custom-shape {
  width: 310px;
  height: 99px;
  position: relative;
  background: #fff;
}

.custom-shape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #D0D1D2;
  /* 精准匹配目标图形的轮廓路径 */
  clip-path: polygon(
    19px 0, 93px 0, 
    93px 16px, 310px 16px, 310px 89px, 
    85px 89px, 85px 99px, 56px 99px, 
    27px 89px, 0 89px, 0 16px, 19px 16px
  );
  /* 偏移1px模拟描边与底色的层次 */
  transform: translate(1px, 1px);
}
</style>

说明 #

• clip-path参数完全对应目标图形的顶点坐标，确保轮廓精准一致
• 伪元素的偏移实现了灰色边缘在白色底色之上的视觉效果
• 可以直接修改width、height调整尺寸，修改background值调整颜色

内容的提问来源于stack exchange，提问作者Avon K