Search code examples
htmlcssgrid-layout

how can design a shape with html and css

I wanted to create this shape with HTML and CSS. I was able to do some parts. I couldn't do some parts either. this is my shape: enter image description here This is an example of my code. It doesn't matter how it is implemented. It may or may not require JavaScript

.parent {display: grid;grid-template-columns: repeat(7, 14.28%);grid-template-rows: repeat(7, 14.28%);grid-column-gap: 0px;grid-row-gap: 0px;width: 700px;height: 700px;}

.div1 { grid-area: 1 / 7 / 2 / 8; }
.div2 { grid-area: 1 / 6 / 2 / 7; }
.div3 { grid-area: 1 / 5 / 2 / 6; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 1 / 3 / 2 / 4; }
.div6 { grid-area: 1 / 2 / 2 / 3; }
.div7 { grid-area: 1 / 1 / 2 / 2; }
.div8 { grid-area: 2 / 7 / 3 / 8; }
.div9 { grid-area: 2 / 6 / 3 / 7; }
.div10 { grid-area: 2 / 5 / 3 / 6; }
.div11 { grid-area: 2 / 4 / 3 / 5; }
.div12 { grid-area: 2 / 3 / 3 / 4; }
.div13 { grid-area: 2 / 2 / 3 / 3; }
.div14 { grid-area: 2 / 1 / 3 / 2; }
.div15 { grid-area: 3 / 7 / 4 / 8; }
.div16 { grid-area: 3 / 6 / 4 / 7; }
.div17 { grid-area: 3 / 5 / 4 / 6; }
.div18 { grid-area: 3 / 4 / 4 / 5; }
.div19 { grid-area: 3 / 3 / 4 / 4; }
.div20 { grid-area: 3 / 2 / 4 / 3; }
.div21 { grid-area: 3 / 1 / 4 / 2; }
.div22 { grid-area: 4 / 7 / 5 / 8; }
.div23 { grid-area: 4 / 6 / 5 / 7; }
.div24 { grid-area: 4 / 5 / 5 / 6; }
.div25 { grid-area: 4 / 4 / 5 / 5; }
.div26 { grid-area: 4 / 3 / 5 / 4; }
.div27 { grid-area: 4 / 2 / 5 / 3; }
.div28 { grid-area: 4 / 1 / 5 / 2; }
.div29 { grid-area: 5 / 7 / 6 / 8; }
.div30 { grid-area: 5 / 6 / 6 / 7; }
.div31 { grid-area: 5 / 5 / 6 / 6; }
.div32 { grid-area: 5 / 4 / 6 / 5; }
.div33 { grid-area: 5 / 3 / 6 / 4; }
.div34 { grid-area: 5 / 2 / 6 / 3; }
.div35 { grid-area: 5 / 1 / 6 / 2; }
.div36 { grid-area: 6 / 7 / 7 / 8; }
.div37 { grid-area: 6 / 6 / 7 / 7; }
.div38 { grid-area: 6 / 5 / 7 / 6; }
.div39 { grid-area: 6 / 4 / 7 / 5; }
.div40 { grid-area: 6 / 3 / 7 / 4; }
.div41 { grid-area: 6 / 2 / 7 / 3; }
.div42 { grid-area: 6 / 1 / 7 / 2; }
.div43 { grid-area: 7 / 7 / 8 / 8; }
.div44 { grid-area: 7 / 6 / 8 / 7; }
.div45 { grid-area: 7 / 5 / 8 / 6; }
.div46 { grid-area: 7 / 4 / 8 / 5; }
.div47 { grid-area: 7 / 3 / 8 / 4; }
.div48 { grid-area: 7 / 2 / 8 / 3; }
.div49 { grid-area: 7 / 1 / 8 / 2; }



.inner{
    border-radius: 100%;
    position: relative;
	height: 100px;
}
.inner4{
    background-color: #fff;
    top: 25%;
    z-index: 5;
}
.inner10{
    background-color: #00c5cf;
    right: 33.3%;
    z-index: 4;
}
.inner11{
    background-color: #00c5cf;
    z-index: 1;
}
.inner12{
    background-color: #ffffff;
    left: 29%;
    z-index: 6;
    border-radius: 100%;
}
.inner12{
    background-color: #303841;
    left: 29%;
    z-index: 6;
    border-radius: 100% 100% 100% 0%;
}
.inner13{
    background-color: #303841;
    left: 29%;
    z-index: 6;
    border-radius: 0;
}
.inner18{
    background-color: #ffffff;
    bottom: 25%;
    z-index: 8;
}
.inner20{
    background-color: #ff4b12;
    right: 0;
    z-index: 4;
    border-radius: 100%;
}
.inner19{
    background-color: #303841;
    bottom: 0%;
    z-index: 6;
    border-radius: 0;
}
.innertxt{
    background-color: #ffffff;
    right: 0;
    z-index: 99999;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding: 25px;
    position: relative;
    top: 10%;
    left: 10%;
}
.inner_em19{
    padding: 35px;
    border-radius: 80% 0px 0px 0px;
    top: 0;
    left: 0;
    background-color: #ffffff;
    height: 30px;
    width: 30px;
    z-index: 99999;
    position: relative;
}
.inner_em13{
    padding: 35px;
    border-radius: 0px 0px 80% 0px;
    top: 0;
    left: 0;
    background-color: #ffffff;
    height: 30px;
    width: 30px;
    z-index: 99999;
    position: relative;
}
<div class="parent">
<div class="div1">
	<div class="inner inner1"></div>
</div>
<div class="div2">
	<div class="inner inner2"></div>
</div>
<div class="div3">
	<div class="inner inner3"></div>
</div>
<div class="div4">
	<div class="inner inner4"></div>
</div>
<div class="div5">
	<div class="inner inner5"></div>
</div>
<div class="div6">
	<div class="inner inner6"></div>
</div>
<div class="div7">
	<div class="inner inner7"></div>
</div>
<div class="div8">
	<div class="inner inner8"></div>
</div>
<div class="div9">
	<div class="inner inner9"></div>
</div>
<div class="div10">
	<div class="inner inner10"><div class="innertxt">text</div></div>
</div>
<div class="div11">
	<div class="inner inner11"></div>
</div>
<div class="div12">
	<div class="inner inner12"><div class="innertxt">text</div></div>
</div>
<div class="div13">
	<div class="inner inner13"><div class="inner_em13"></div></div>
</div>
<div class="div14">
	<div class="inner inner14"></div>
</div>
<div class="div15">
	<div class="inner inner15"></div>
</div>
<div class="div16">
	<div class="inner inner16"></div>
</div>
<div class="div17">
	<div class="inner inner17"></div>
</div>
<div class="div18">
	<div class="inner inner18"></div>
</div>
<div class="div19">
	<div class="inner inner19"><div class="inner_em19"></div></div>
</div>
<div class="div20">
	<div class="inner inner20"><div class="innertxt">text</div></div>
</div>
<div class="div21">
	<div class="inner inner21"></div>
</div>
<div class="div22">
	<div class="inner inner22"></div>
</div>
<div class="div23">
	<div class="inner inner23"></div>
</div>
<div class="div24">
	<div class="inner inner24"></div>
</div>
<div class="div25">
	<div class="inner inner25"></div>
</div>
<div class="div26">
	<div class="inner inner26"></div>
</div>
<div class="div27">
	<div class="inner inner27"></div>
</div>
<div class="div28">
	<div class="inner inner28"></div>
</div>
<div class="div29">
	<div class="inner inner29"></div>
</div>
<div class="div30">
	<div class="inner inner30"></div>
</div>
<div class="div31">
	<div class="inner inner31"></div>
</div>
<div class="div32">
	<div class="inner inner32"></div>
</div>
<div class="div33">
	<div class="inner inner33"></div>
</div>
<div class="div34">
	<div class="inner inner34"></div>
</div>
<div class="div35">
	<div class="inner inner35"></div>
</div>
<div class="div36">
	<div class="inner inner36"></div>
</div>
<div class="div37">
	<div class="inner inner37"></div>
</div>
<div class="div38">
	<div class="inner inner38"></div>
</div>
<div class="div39">
	<div class="inner inner39"></div>
</div>
<div class="div40">
	<div class="inner inner40"></div>
</div>
<div class="div41">
	<div class="inner inner41"></div>
</div>
<div class="div42">
	<div class="inner inner42"></div>
</div>
<div class="div43">
	<div class="inner inner43"></div>
</div>
<div class="div44">
	<div class="inner inner44"></div>
</div>
<div class="div45">
	<div class="inner inner45"></div>
</div>
<div class="div46">
	<div class="inner inner46"></div>
</div>
<div class="div47">
	<div class="inner inner47"></div>
</div>
<div class="div48">
	<div class="inner inner48"></div>
</div>
<div class="div49">
	<div class="inner inner49"></div>
</div>

</div>

There is no problem for the horizontal sections There is a problem for the oblique sections

Solution 
  • .inner-12{


    border-radius: 100% 100% 100% 0%;

}   

.inner.inner20:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ff4b12;
    border-radius: 100%;
}

.inner20 {
    background-color: #303841;
    right: 0;
    z-index: 4;
    border-radius: 100% 0% 100% 100%;
}