htmlcsssvg

Is it possible to create this shape using pure CSS?


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.


Solution

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