Need help to design page using css

Question

I have requirement to design menu in round circle in a page as below shown image and its dynamic menu, icon can be generated based one requirement.

Can anyone tell me how to achieve this one.

See working example below : http://jsfiddle.net/6cygbd37/1/

 /*--CSS--*/ .block { border: 1px solid red; text-align: center; vertical-align: middle; } .circle { background: red; border-radius: 200px; color: white; height: 200px; font-weight: bold; width: 200px; display: table; margin: 20px auto; } .circle p { vertical-align: middle; display: table-cell; }

 <!--HTML--> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-4 block"> <div class="circle"> <p>Some Text here Some text here</p> </div> </div> <div class="col-md-4 block"> <div class="circle"> <p>Some Text here</p> </div> </div> <div class="col-md-4 block"> <div class="circle"> <p>Some More Text here</p> </div> </div> </div> </div>

this is working code i got help internet, Help to achieve to below format please

Answer 1

Are you looking for something like this?

 .main-block { width: 400px; height: 400px; border: 1px solid #000; } .set { display: block; width: 100%; height: 20%; } .item, .dummy { display: inline-block; width: 20%; height: 100%; box-sizing: border-box; float: left; } .item { border: 1px solid #f00; border-radius: 50%; }

 <div class="main-block"> <div class="set"> <div class="dummy"></div> <div class="dummy"></div> <div class="item"></div> <div class="dummy"></div> <div class="dummy"></div> </div> <div class="set"> <div class="dummy"></div> <div class="item"></div> <div class="dummy"></div> <div class="item"></div> <div class="dummy"></div> </div> <div class="set"> <div class="item"></div> <div class="dummy"></div> <div class="dummy"></div> <div class="dummy"></div> <div class="item"></div> </div> <div class="set"> <div class="dummy"></div> <div class="item"></div> <div class="dummy"></div> <div class="item"></div> <div class="dummy"></div> </div> </div>

Answer 2

Can try using flexbox , and it is responsive too.

.all-circles .row{
    display: flex;
    flex-wrap: wrap;
}

.all-circles .row .block{
    flex-basis: 100%;
}

.all-circles .row .block+.block{
    flex-basis: 50%;
    box-sizing: border-box;
}

.all-circles .row .block+.block{
    flex-basis: 50%;
    box-sizing: border-box;
}

.all-circles .row .block.r2,
.all-circles .row .block.r6{
    padding-left: 20%;
}

.all-circles .row .block.r3,
.all-circles .row .block.r7{
    padding-right: 20%;
}

.all-circles .row .block.r4{

}

.all-circles .row .block.r5{

}

Working example here .

Answer 3

I have found answer my self for the question.

<!DOCTYPE html>
<html>  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <style>
        #parent {
            position: relative;
            top: 200px;
            left: 200px;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #parent div {
            position: absolute;
            -webkit-transition: all 2s linear;
            -moz-transition: all 2s linear;
            transition: all 2s linear;
            height: 80px;
            width: 80px;
            border-radius: 100px;
            background-image: url("https://cdn4.iconfinder.com/data/icons/e-commerce-and-business/104/New_Latest_Breaking-64.png");
            background-repeat: no-repeat;
            align-content:  stretch;
        }
    </style>
</head>

<body>
        <div id="parent">
            <div> item1 </div>
            <div> item2 </div>
            <div> item3 </div>
            <div> item4 </div>
            <div> item5 </div>
            <div> item6 </div>
            <div> item7 </div>
            <div> item8 </div>
            <div> item9 </div>            
        </div>

    <script>
        var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
            radius = '12em', //distance from center
            start = -90, //shift start from 0
            $elements = $('#parent >div'), numberOfElements = (type === 1) ? $elements.length : $elements.length - 1,
                        slice = 360 * type / numberOfElements;

        $elements.each(function (i) {
            var $self = $(this)
                , rotate = slice * i + start
                , rotateReverse = rotate * -1;

            $self.css({
                'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
            });
        });
    </script>

</body>

</html>

Need help to design page using css

Question

3 answers

solution1
1 2017-10-09 06:54:38

solution2
1 2017-10-09 07:21:10

solution3
0 ACCPTED 2017-11-02 12:36:49

I have found answer my self for the question.

Need help to design page using css

Question

3 answers

solution1 1 2017-10-09 06:54:38

solution2 1 2017-10-09 07:21:10

solution3 0 ACCPTED 2017-11-02 12:36:49

I have found answer my self for the question.

solution1
1 2017-10-09 06:54:38

solution2
1 2017-10-09 07:21:10

solution3
0 ACCPTED 2017-11-02 12:36:49