Html - Is it possible to create this shape using pure CSS?

rkg
January 22, 2025
37 views
1 vote
2 Answers

I have been trying for days to create this with CSS but it seems impossible. Best one I got was 2 squares and a straight connector. Is it really possible to create this shape using CSS?

I have also tried generating CSS using some AI tools but to no avail. I’m not that good at CSS since I mostly do backend work. If anyone can help, it is much appreciated.

Answers

Chosen as BEST ANSWER

I manage to draw it using SVG. Sample below:

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

(Edit)

U can use clip-path

#clipBox {
      width: 150px;
      height: 150px;
      background-color: blue;
      clip-path: path(
          "M11.417767433565757,143.9183926909559 c0,-0.15770983676746428 -0.5512105452320238,-0.3154196735349286 -1.194289514669385,-0.3154196735349286 c-0.6737017775058073,0 -1.286157938874723,-0.12616786941397112 -1.3780263630800604,-0.28387770618143565 c-0.0918684242053373,-0.15770983676746428 -0.5512105452320238,-0.3785036082419137 -1.0105526662587103,-0.5046714776558853 c-0.9493070501218198,-0.2207937714744499 -2.2048421809280967,-1.6086403350281326 -2.9704123826392417,-3.28036460476325 c-0.3062280806844584,-0.6308393470698558 -0.6737017775058073,-1.3878465635536834 -0.8268158178480357,-1.6717242697351176 c-0.3368508887529038,-0.6623813144233488 -0.36747369682134956,-46.30360807492743 -0.03062280806844582,-46.30360807492743 c0.12249123227378342,0 0.4899649290951329,-0.6308393470698558 0.8268158178480357,-1.4193885309071763 c0.3368508887529038,-0.7885491838373189 0.7043245855742524,-1.4193885309071763 0.8268158178480357,-1.4193885309071763 c0.0918684242053373,0 0.27560527261601225,-0.2523357388279427 0.36747369682134956,-0.5362134450093774 c0.18373684841067478,-0.5992973797163622 1.8067456760383012,-1.6717242697351176 2.5110702616125544,-1.6717242697351176 c0.24498246454756661,0 0.42871931295824156,-0.12616786941397112 0.42871931295824156,-0.28387770618143565 c0,-0.4731295103023927 4.715912442540649,-0.6939232817768413 14.63770225671708,-0.6939232817768413 c9.003105572123058,0.031541967353492864 13.167807469431684,-0.1892518041209569 17.0569040941243,-0.9778009879582764 c0.8574386259164826,-0.15770983676746428 1.9598597163805307,-0.3785036082419137 2.4498246454756627,-0.4731295103023927 c0.5205877371635786,-0.09462590206047845 1.0717982823956025,-0.28387770618143565 1.2249123227378313,-0.4100455755954069 c0.18373684841067478,-0.12616786941397112 0.9493070501218198,-0.34696164088842074 1.7455000599014094,-0.4415875429488995 c0.7961930097795895,-0.12616786941397112 1.5311404034222886,-0.34696164088842074 1.6230088276276264,-0.5362134450093774 c0.12249123227378342,-0.15770983676746428 0.4899649290951329,-0.28387770618143565 0.8880614339849275,-0.28387770618143565 c0.36747369682134956,0 1.3780263630800604,-0.34696164088842074 2.2048421809280967,-0.7885491838373189 c0.8268158178480357,-0.4415875429488995 1.6230088276276264,-0.7885491838373189 1.7455000599014094,-0.7885491838373189 c0.3062280806844584,0 5.5121054523202435,-2.617983290339901 5.72646510879936,-2.870319029167845 c0.0918684242053373,-0.12616786941397112 0.4593421210266871,-0.28387770618143565 0.8574386259164826,-0.4100455755954069 c0.36747369682134956,-0.12616786941397112 0.6737017775058073,-0.3785036082419137 0.6737017775058073,-0.5362134450093774 c0,-0.15770983676746428 0.21435965647912078,-0.28387770618143565 0.4593421210266871,-0.28387770618143565 c0.24498246454756661,0 0.4593421210266871,-0.12616786941397112 0.4593421210266871,-0.3154196735349286 c0,-0.15770983676746428 0.21435965647912078,-0.3154196735349286 0.4593421210266871,-0.3154196735349286 c0.24498246454756661,0 0.7655702017111436,-0.34696164088842074 1.1636667066009394,-0.7570072164838277 c0.39809650488979537,-0.4100455755954069 1.0105526662587103,-0.8516331185443058 1.3780263630800604,-0.9462590206047846 c0.36747369682134956,-0.12616786941397112 0.6737017775058073,-0.3785036082419137 0.6737017775058073,-0.5362134450093774 c0,-0.15770983676746428 0.15311404034222934,-0.28387770618143565 0.3368508887529038,-0.28387770618143565 c0.18373684841067478,0 0.4899649290951329,-0.1892518041209569 0.734947393642699,-0.3785036082419137 c0.21435965647912078,-0.2207937714744499 0.8574386259164826,-0.7570072164838277 1.4392719792169517,-1.1985947594327266 c1.3167807469431683,-1.00934295531177 6.9207546234687465,-6.7815229810009505 7.900684481659011,-8.137827577201143 c0.42871931295824156,-0.5992973797163622 0.9186842420533735,-1.230136726786219 1.0717982823956025,-1.4193885309071763 c0.8574386259164826,-1.0408849226652617 1.990482524448975,-2.7441511597538737 1.990482524448975,-2.996486898581814 c0,-0.1892518041209569 0.21435965647912078,-0.3785036082419137 0.4593421210266871,-0.5046714776558853 c0.24498246454756661,-0.09462590206047845 0.4593421210266871,-0.34696164088842074 0.4593421210266871,-0.5362134450093774 c0,-0.2207937714744499 0.18373684841067478,-0.6308393470698558 0.42871931295824156,-0.8831750858977994 c0.5512105452320238,-0.6308393470698558 1.9598597163805307,-3.0911128006422945 2.419201837407216,-4.226623625368035 c0.18373684841067478,-0.4731295103023927 0.4593421210266871,-0.8516331185443058 0.5818333533004697,-0.8516331185443058 c0.12249123227378342,0 0.24498246454756661,-0.12616786941397112 0.24498246454756661,-0.3154196735349286 c0,-0.15770983676746428 0.5205877371635786,-1.482472465614162 1.1636667066009394,-2.9018609965213376 c0.6430789694373612,-1.4509304982606688 1.4086491711485056,-3.4696164088842076 1.7455000599014094,-4.510501331549472 c0.3062280806844584,-1.0408849226652617 0.6430789694373612,-2.1763957473910027 0.7961930097795895,-2.523357388279424 c0.12249123227378342,-0.34696164088842074 0.3062280806844584,-0.9778009879582764 0.39809650488979537,-1.4193885309071763 c0.3062280806844584,-1.5140144329676544 0.8268158178480357,-3.9427459191865992 1.1636667066009394,-5.362134450093776 c0.15311404034222934,-0.7885491838373189 0.39809650488979537,-3.5011583762377017 0.4899649290951329,-6.0560577318706175 c0.061245616136891584,-2.5864413229864107 0.27560527261601225,-4.668211168316934 0.39809650488979537,-4.668211168316934 c0.15311404034222934,0 0.27560527261601225,-4.7312951030239185 0.27560527261601225,-10.471933161359608 c0,-9.872635781643249 0.03062280806844582,-10.566559063420087 0.5818333533004697,-11.418192181964395 c0.3368508887529038,-0.5362134450093774 0.5512105452320238,-1.0408849226652617 0.4593421210266871,-1.1985947594327266 c-0.0918684242053373,-0.12616786941397112 -0.03062280806844582,-0.2523357388279427 0.12249123227378342,-0.2523357388279427 c0.15311404034222934,0 0.7655702017111436,-0.4100455755954069 1.3167807469431683,-0.9462590206047846 c0.5818333533004697,-0.5046714776558853 1.194289514669385,-0.9462590206047846 1.4086491711485056,-0.9462590206047846 c0.18373684841067478,0 0.39809650488979537,-0.1892518041209569 0.4593421210266871,-0.3785036082419137 c0.12249123227378342,-0.3154196735349286 5.022140523225106,-0.4100455755954069 23.242711323950342,-0.4100455755954069 c21.589079688254273,0 23.150842899745005,0.031541967353492864 24.253263990209057,0.567755412362871 c0.6124561613689158,0.3154196735349286 1.1330438985324944,0.6939232817768413 1.1330438985324944,0.8516331185443058 c0,0.1892518041209569 0.15311404034222934,0.3154196735349286 0.3368508887529038,0.3154196735349286 c0.4593421210266871,0 1.500517595353843,1.230136726786219 1.500517595353843,1.7978921391490896 c0,0.2207937714744499 0.12249123227378342,0.4100455755954069 0.27560527261601225,0.4100455755954069 c0.12249123227378342,0 0.4899649290951329,0.8200911511908127 0.7655702017111436,1.8294341065025828 c0.42871931295824156,1.6086403350281326 0.4899649290951329,4.3843334621354995 0.4899649290951329,22.96255223334276 c0,13.373794157880946 -0.12249123227378342,21.60624763714257 -0.3368508887529038,22.520964690393864 c-0.42871931295824156,1.9556019759165535 -1.500517595353843,4.068913788600572 -2.1742193728596506,4.28970756007502 c-0.3062280806844584,0.09462590206047845 -0.5512105452320238,0.28387770618143565 -0.5512105452320238,0.4415875429488995 c0,0.15770983676746428 -0.734947393642699,0.6308393470698558 -1.5923860195591804,1.072426890018755 l-1.6230088276276264,0.7885491838373189 l-13.014693429089451,0.12616786941397112 c-7.165737088016311,0.06308393470698567 -13.351544317842357,0.2207937714744499 -13.780263630800599,0.34696164088842074 c-0.42871931295824156,0.15770983676746428 -1.5617632114907347,0.3154196735349286 -2.5110702616125544,0.4100455755954069 c-0.9799298581902646,0.09462590206047845 -1.776122867969856,0.28387770618143565 -1.776122867969856,0.4100455755954069 c0,0.12616786941397112 -0.8268158178480357,0.3154196735349286 -1.8373684841067464,0.4415875429488995 c-1.0105526662587103,0.12616786941397112 -1.8986141002436376,0.34696164088842074 -1.9598597163805307,0.4731295103023927 c-0.0918684242053373,0.15770983676746428 -0.7961930097795895,0.34696164088842074 -1.5617632114907347,0.4415875429488995 c-0.734947393642699,0.12616786941397112 -1.6230088276276264,0.34696164088842074 -1.8986141002436376,0.5046714776558853 c-0.7655702017111436,0.3785036082419137 -1.8067456760383012,0.8200911511908127 -3.613491352076601,1.4509304982606688 c-1.776122867969856,0.6623813144233488 -7.6863248251798915,3.785036082419136 -8.115044138138133,4.28970756007502 c-0.0918684242053373,0.09462590206047845 -0.7961930097795895,0.567755412362871 -1.5923860195591804,1.0408849226652617 c-0.8268158178480357,0.4731295103023927 -1.4698947872853978,1.00934295531177 -1.4698947872853978,1.1670527920792335 c0,0.15770983676746428 -0.18373684841067478,0.28387770618143565 -0.42871931295824156,0.28387770618143565 c-0.24498246454756661,0 -0.8574386259164826,0.4415875429488995 -1.4086491711485056,0.9462590206047846 c-0.5512105452320238,0.5362134450093774 -1.1024210904640475,0.9462590206047846 -1.286157938874723,0.9462590206047846 c-0.15311404034222934,0 -0.734947393642699,0.5046714776558853 -1.286157938874723,1.1039688573722475 c-0.5818333533004697,0.5992973797163622 -1.1024210904640475,1.1039688573722475 -1.194289514669385,1.1039688573722475 c-0.24498246454756661,0 -4.593421210266865,4.5735852662564564 -5.757087916867807,6.024515764517127 c-0.8880614339849275,1.1039688573722475 -1.7455000599014094,2.2079377147444963 -2.3579562212703244,2.9649449312283234 c-0.15311404034222934,0.1892518041209569 -0.5205877371635786,0.7570072164838277 -0.8574386259164826,1.2616786941397118 c-0.3062280806844584,0.5362134450093774 -0.6430789694373612,1.00934295531177 -0.734947393642699,1.1039688573722475 c-0.3062280806844584,0.3154196735349286 -0.9493070501218198,1.4193885309071763 -1.1024210904640475,1.9871439432700466 c-0.12249123227378342,0.28387770618143565 -0.3062280806844584,0.5362134450093774 -0.4593421210266871,0.5362134450093774 c-0.15311404034222934,0 -0.27560527261601225,0.15770983676746428 -0.27560527261601225,0.3154196735349286 c0,0.1892518041209569 -0.4899649290951329,1.135510824725741 -1.0717982823956025,2.0817698453305247 c-0.5818333533004697,0.9462590206047846 -1.0717982823956025,1.8294341065025828 -1.0717982823956025,1.9556019759165535 c0,0.12616786941397112 -0.42871931295824156,1.072426890018755 -0.9186842420533735,2.113311812684018 c-0.5205877371635786,1.0408849226652617 -0.9186842420533735,2.0502278779770307 -0.9186842420533735,2.239479682097988 c0,0.1892518041209569 -0.21435965647912078,0.7885491838373189 -0.4593421210266871,1.2616786941397118 c-0.24498246454756661,0.5046714776558853 -0.4593421210266871,1.230136726786219 -0.4593421210266871,1.6401823023816249 c0,0.3785036082419137 -0.12249123227378342,0.6939232817768413 -0.24498246454756661,0.6939232817768413 c-0.42871931295824156,0 -2.2048421809280967,7.4123623280708095 -2.2048421809280967,9.2102544672199 c0,0.6308393470698558 -0.15311404034222934,1.1985947594327266 -0.36747369682134956,1.2616786941397118 c-0.27560527261601225,0.09462590206047845 -0.36747369682134956,3.5327003435911926 -0.4593421210266871,13.373794157880946 c-0.0918684242053373,12.49061907198315 -0.39809650488979537,17.474249913835017 -1.0411754743271562,17.474249913835017 c-0.15311404034222934,0 -0.27560527261601225,0.15770983676746428 -0.27560527261601225,0.34696164088842074 c0,0.1892518041209569 -0.39809650488979537,0.7570072164838277 -0.9186842420533735,1.2932206614932051 c-0.4899649290951329,0.5046714776558853 -0.9186842420533735,1.072426890018755 -0.9186842420533735,1.230136726786219 c0,0.15770983676746428 -0.27560527261601225,0.28387770618143565 -0.5818333533004697,0.28387770618143565 c-0.3368508887529038,0 -0.7961930097795895,0.2207937714744499 -1.0717982823956025,0.4731295103023927 c-0.24498246454756661,0.2523357388279427 -0.9493070501218198,0.4731295103023927 -1.5311404034222886,0.4731295103023927 c-0.6124561613689158,0 -1.1024210904640475,0.15770983676746428 -1.1024210904640475,0.3154196735349286 c0,0.2207937714744499 -7.135114279947865,0.3154196735349286 -20.82350948654313,0.3154196735349286 c-13.68839520659526,0 -20.82350948654313,-0.09462590206047845 -20.82350948654313,-0.3154196735349286 z"
        );
    }

<div id="clipBox"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Is it possible to create this shape using pure CSS?

Answers