是否可以使用纯CSS创建这个形状？

Question

我几天来一直在尝试用 CSS 创建这个，但似乎不可能。我得到的最好的一个是 2 个方块和一个直连接器。真的可以使用 CSS 创建这个形状吗？

我也尝试过使用一些AI工具生成CSS，但没有成功。我不太擅长 CSS，因为我主要从事后端工作。如果有人可以提供帮助，我们将不胜感激。

Answer 1

我设法使用

SVG

来绘制它。示例如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="508.000000pt" height="492.000000pt" viewBox="0 0 508.000000 492.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,492.000000) scale(0.100000,-0.100000)" fill="#385994" stroke="none">
  <path d="M470 4810 c0 -5 -18 -10 -39 -10 -22 0 -42 -4 -45 -9 -3 -5 -18 -12 -33 -16 -31 -7 -72 -51 -97 -104 -10 -20 -22 -44 -27 -53 -11 -21 -12 -1468 -1 -1468 4 0 16 -20 27 -45 11 -25 23 -45 27 -45 3 0 9 -8 12 -17 6 -19 59 -53 82 -53 8 0 14 -4 14 -9 0 -15 154 -22 478 -22 294 1 430 -6 557 -31 28 -5 64 -12 80 -15 17 -3 35 -9 40 -13 6 -4 31 -11 57 -14 26 -4 50 -11 53 -17 4 -5 16 -9 29 -9 12 0 45 -11 72 -25 27 -14 53 -25 57 -25 10 0 180 -83 187 -91 3 -4 15 -9 28 -13 12 -4 22 -12 22 -17 0 -5 7 -9 15 -9 8 0 15 -4 15 -10 0 -5 7 -10 15 -10 8 0 25 -11 38 -24 13 -13 33 -27 45 -30 12 -4 22 -12 22 -17 0 -5 5 -9 11 -9 6 0 16 -6 24 -12 7 -7 28 -24 47 -38 43 -32 226 -215 258 -258 14 -19 30 -39 35 -45 28 -33 65 -87 65 -95 0 -6 7 -12 15 -16 8 -3 15 -11 15 -17 0 -7 6 -20 14 -28 18 -20 64 -98 79 -134 6 -15 15 -27 19 -27 4 0 8 -4 8 -10 0 -5 17 -47 38 -92 21 -46 46 -110 57 -143 10 -33 21 -69 26 -80 4 -11 10 -31 13 -45 10 -48 27 -125 38 -170 5 -25 13 -111 16 -192 2 -82 9 -148 13 -148 5 0 9 -150 9 -332 0 -313 1 -335 19 -362 11 -17 18 -33 15 -38 -3 -4 -1 -8 4 -8 5 0 25 -13 43 -30 19 -16 39 -30 46 -30 6 0 13 -6 15 -12 4 -10 164 -13 759 -13 705 0 756 1 792 18 20 10 37 22 37 27 0 6 5 10 11 10 15 0 49 39 49 57 0 7 4 13 9 13 4 0 16 26 25 58 14 51 16 139 16 728 0 424 -4 685 -11 714 -14 62 -49 129 -71 136 -10 3 -18 9 -18 14 0 5 -24 20 -52 34 l-53 25 -425 4 c-234 2 -436 7 -450 11 -14 5 -51 10 -82 13 -32 3 -58 9 -58 13 0 4 -27 10 -60 14 -33 4 -62 11 -64 15 -3 5 -26 11 -51 14 -24 4 -53 11 -62 16 -25 12 -59 26 -118 46 -58 21 -251 120 -265 136 -3 3 -26 18 -52 33 -27 15 -48 32 -48 37 0 5 -6 9 -14 9 -8 0 -28 14 -46 30 -18 17 -36 30 -42 30 -5 0 -24 16 -42 35 -19 19 -36 35 -39 35 -8 0 -150 145 -188 191 -29 35 -57 70 -77 94 -5 6 -17 24 -28 40 -10 17 -21 32 -24 35 -10 10 -31 45 -36 63 -4 9 -10 17 -15 17 -5 0 -9 5 -9 10 0 6 -16 36 -35 66 -19 30 -35 58 -35 62 0 4 -14 34 -30 67 -17 33 -30 65 -30 71 0 6 -7 25 -15 40 -8 16 -15 39 -15 52 0 12 -4 22 -8 22 -14 0 -72 235 -72 292 0 20 -5 38 -12 40 -9 3 -12 112 -15 424 -3 396 -13 554 -34 554 -5 0 -9 5 -9 11 0 6 -13 24 -30 41 -16 16 -30 34 -30 39 0 5 -9 9 -19 9 -11 0 -26 7 -35 15 -8 8 -31 15 -50 15 -20 0 -36 5 -36 10 0 7 -233 10 -680 10 -447 0 -680 -3 -680 -10z"/>
  </g>
  </svg>