How can I create this shape using CSS/SVG?

Question

Is there an easier to create these 2 shapes in CSS/SVG? I have tried a few different things already, but I can't seem to get it there. I have attempted to create the semi-circle on top, but it doesn't look the way the shape is. How can I create this? I want it to look like this: Shape Here is my code below.

 *, *: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

Use SVG. I tried to build your logo with CSS but switched to SVG. Copy & past the following code into a new file called "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

Try this code:

 <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>

How can I create this shape using CSS/SVG?

Question

2 answers

solution1
0 2021-03-14 17:38:14

solution2
0 ACCPTED 2021-03-14 18:22:22

How can I create this shape using CSS/SVG?

Question

2 answers

solution1 0 2021-03-14 17:38:14

solution2 0 ACCPTED 2021-03-14 18:22:22

solution1
0 2021-03-14 17:38:14

solution2
0 ACCPTED 2021-03-14 18:22:22