How to draw different shapes using HTML and CSS?

Question

I am trying to draw the image attached below using HTML and CSS but I am not able to get my expected output.

<html>
    <style type="text/css">
        #center_cir {
            border-left: 48px solid transparent;
            border-right: 50px solid transparent;
            height: 0;
            width: 100px;
            border-top: 100px solid red;
            border-top-left-radius:60px;
            border-top-right-radius:60px;
        }
        #circle {
            width: 140px;
            height: 120px;
            background: red;
            -moz-border-radius: 60px;
            -webkit-border-radius: 60px;
            border-radius: 60px;
        }
    </style>
    <div id="center_cir">
        <!--<div id="circle">
        </div>-->
    </div>

</html>

[Check this out](https://coveloping.com/tools/css-shapes-generator), there a probably plenty more sites that generate CSS shapes if you do a search — musefan, Jun 24 '15 at 13:12
here's the similar question answered http://stackoverflow.com/questions/20803489/draw-a-curve-with-css — Cin Sb Sangpi, Jun 24 '15 at 13:20
I formatted the code and fixed some typos for better readability. Please attach the image you are mentioning about. — Ram, Jun 25 '15 at 04:07

Aaron · Answer 1 · 2015-06-24T13:37:49.537

0

Something like this should do it for you... Adjust the color and size and you're done.

#center_cir {
     border-left: 48px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
  border-top: 100px solid red;
  border-top-left-radius:60px;
    border-top-right-radius:60px;
  position: relative;

}
#center_cir:after {
    background: blue;
    border-radius: 90px 90px 0 0;
    content: "";
    height: 44px;
    position: absolute;
    width: 100px;
}

<div id="center_cir"></div>

edited Jun 24 '15 at 13:37

answered Jun 24 '15 at 13:22

Aaron

10,187
3
23
39

tat bottom curve should be in reverse direction like this ( – Meenakshi A Jun 24 '15 at 13:26
it should look like separate circle ... that red color bottom border itself curved inside – Meenakshi A Jun 24 '15 at 13:47
I have no idea what you're asking – Aaron Jun 24 '15 at 13:49

How to draw different shapes using HTML and CSS?

1 Answers1