Want to make a custom shape using CSS

Question

I want to create a shape like this and every block should be a div so that I can show info on that. I tried but I only make out the lower cone by using the below code:

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

How will I achieve the upper curved boxes any lead or tutorial will be great help.

Answer 1

You can simply make it in CSS3

.wifi {
  padding: 20px;
}

.wifi,
.wifi:before {
  display: inline-block;
  border: 60px double transparent;
  border-top-color: currentColor;
  border-radius: 50%;
}

.wifi:before {
  content: '';
  width: 0;
  height: 0;
}

<div class="wifi" /></div>

Answer 2

You could use the image provided as a background image and then position the div's over each square. Something like this:

<div id="wrapper">
    <div id="row1el1" class="row1">This is some text</div>
    <div id="row2el1" class="row2">This is some text</div>
    <div id="row2el2" class="row2">This is some text</div>
    <div id="row3el1" class="row3">This is some text</div>
    <div id="row3el2" class="row3">This is some text</div>
    <div id="row3el3" class="row3">This is some text</div>
    <div id="row3el4" class="row3">This is some text</div>
    <div id="row4el1" class="row4">This is some text</div>
    <div id="row4el2" class="row4">This is some text</div>
    <div id="row4el3" class="row4">This is some text</div>
    <div id="row4el4" class="row4">This is some text</div>
    <div id="row4el5" class="row4">This is some text</div>
    <div id="row4el6" class="row4">This is some text</div>
    <div id="row4el7" class="row4">This is some text</div>
    <div id="row4el8" class="row4">This is some text</div>
</div>

<style>
    #wrapper {
        position: relative;
        height: 500px;
        width: 500px;
        background-image: url(shapes.png);
        background-size: 100% 100%;
    }
    #wrapper div {
        height: 15%;
        position: absolute;
        text-align: center;
    }
    .row1 {
        width: 20%;
    }
    .row2 {
        width: 20%;
    }
    .row3 {
        width: 15%;
    }
    .row4 {
        width: 12%;
    }
    #row1el1 {
        left: 40%;
        top: 75%;
    }
    #row2el1 {
        transform: rotate(-20deg);
        left: 30%;
        top: 53%;
    }
    #row2el2 {
        transform: rotate(20deg);
        left: 50%;
        top: 53%;
    }
    #row3el1 {
        transform: rotate(-30deg);
        left: 18%;
        top: 37%;
    }
    #row3el2 {
        transform: rotate(-15deg);
        left: 34%;
        top: 30%;
    }
    #row3el3 {
        transform: rotate(15deg);
        left: 51%;
        top: 30%;
    }
    #row3el4 {
        transform: rotate(30deg);
        left: 67%;
        top: 37%;
    }
    #row4el1 {
        transform: rotate(-35deg);
        left: 3%;
        top: 20%;
    }
    #row4el2 {
        transform: rotate(-27deg);
        left: 14%;
        top: 12%;
    }
    #row4el3 {
        transform: rotate(-18deg);
        left: 25%;
        top: 7%;
    }
    #row4el4 {
        transform: rotate(-7deg);
        left: 38%;
        top: 3%;
    }
    #row4el5 {
        transform: rotate(7deg);
        left: 50%;
        top: 3%;
    }
    #row4el6 {
        transform: rotate(18deg);
        left: 62%;
        top: 7%;
    }
    #row4el7 {
        transform: rotate(27deg);
        left: 73%;
        top: 12%;
    }
    #row4el8 {
        transform: rotate(35deg);
        left: 83%;
        top: 20%;
    }
</style>