如何使用 CSS/SVG 创建此形状？

Question

在 CSS/SVG 中创建这 2 个形状是否更容易？我已经尝试了一些不同的东西，但我似乎无法做到这一点。我试图在顶部创建半圆，但它看起来不像原来的形状。我怎样才能创建这个？我希望它看起来像这样：Shape 下面是我的代码。

*, *:before, *:after{ 
    box-sizing: border-box; 
} 
.css-shapes-preview{ 
    position: relative; 
    height: 0px; 
    width: 0px; 
    border-radius: 100px; 
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    border-top: 100px solid black; 
    border-left: 100px solid black; 
    border-right: 100px solid transparent; 
    border-bottom: 100px solid black; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="css-shapes-preview"></div>
</body>
</html>

Answer 1

使用 SVG。我尝试使用 CSS 构建您的徽标，但切换到 SVG。将以下代码复制并粘贴到名为“Group 1.svg”

的新文件中

<svg xmlns="http://www.w3.org/2000/svg" width="757" height="871" viewBox="0 0 757 871">
  <g id="Group_1" data-name="Group 1" transform="translate(-1011 -176)">
    <g id="Group_5" data-name="Group 5">
      <path id="Ellipse_outer" d="M364.5,0C565.808,0,729,163.192,729,364.5S565.808,729,364.5,729,0,565.808,0,364.5,163.192,0,364.5,0Z" transform="translate(1024 176)"/>
      <path id="Ellispe-half-inner" d="M175,0A175,175,0,0,1,350,175H0A175,175,0,0,1,175,0Z" transform="translate(1214 365)" fill="#fff"/>
    </g>
    <path id="Exclusion_2" data-name="Exclusion 2" d="M685.306,682H71.694a30.762,30.762,0,0,1-9.328-1.416,28.95,28.95,0,0,1-7.87-3.9,30.574,30.574,0,0,1-12.458-29.771,28.946,28.946,0,0,1,2.75-8.339,30.758,30.758,0,0,1,5.54-7.638L77.868,603H0V384l13-13.187h0V540H139.966l-62.1,63H679.132l-62.1-63,0,0,0,0H742V368.781h0L757,384V603H679.132l27.54,27.94a30.757,30.757,0,0,1,5.539,7.638,28.948,28.948,0,0,1,2.75,8.339A30.574,30.574,0,0,1,702.5,676.688a28.949,28.949,0,0,1-7.87,3.9A30.762,30.762,0,0,1,685.306,682ZM617.032,540H139.966L357.134,319.676a29.974,29.974,0,0,1,42.731,0L617.034,540h0ZM13,370.812V175H206.007L13,370.811h0Zm729-2.03h0L550.994,175H206.007L378.5,0,550.993,175H742V368.781Z" transform="translate(1011 365)" fill="#fff"/>
  </g>
</svg>

Answer 2

试试这个代码：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1252 902">
    <g transform="translate(0,902) scale(0.1,-0.1)">
        <path d="M6090 8044 c-431 -30 -790 -108 -1145 -249 -472 -187 -870 -449
-1230 -810 -649 -648 -1020 -1492 -1061 -2416 l-7 -149 764 0 c916 0 989 6
1091 83 85 65 113 115 183 333 73 228 152 394 255 539 83 117 270 303 388 385
425 297 964 379 1446 218 355 -117 650 -341 852 -643 94 -142 154 -271 216
-465 72 -223 86 -255 135 -311 56 -61 109 -93 193 -115 58 -16 150 -18 894
-21 l829 -4 -7 143 c-23 478 -122 908 -305 1321 -524 1185 -1619 1991 -2906
2142 -129 15 -479 26 -585 19z" />
        <path d="M4692 4405 c-29 -7 -76 -29 -105 -48 -29 -20 -391 -376 -805 -790
l-754 -754 40 -79 c259 -514 696 -997 1210 -1339 l103 -69 862 860 c811 810
866 862 926 888 50 22 74 27 115 24 110 -9 90 8 1013 -912 l862 -860 113 76
c500 333 947 829 1199 1331 l41 80 -754 754 c-414 414 -775 769 -803 788 -100
69 -5 65 -1690 64 -1200 -1 -1531 -3 -1573 -14z" />
    </g>
</svg>

如何使用 CSS/SVG 创建此形状？

How can I create this shape using CSS/SVG?

html

css

shapes