css - is it possible to make the following shape using only css and nothing else

Question

Is there a way to make a shape like the following using only CSS. enter image description here

I am a newbie so I really don't know much, and I've been googling for hours but nothing. Oh and I found this link http://www.css3shapes.com/ but I don't know how to use the codes there to make the above shape and this too http://jsfiddle.net/JvdKk/ Oh and the borders are 3pt in word.

css-tricks.com/examples/ShapesOfCSS google css shapes.

Ani
– Ani

2013-12-17 15:46:57 +00:00
Commented Dec 17, 2013 at 15:46 — Ani
– Ani, Commented Dec 17, 2013 at 15:46

SW4 · Accepted Answer · 2013-12-17 15:58:59Z

8

See this FIDDLE

You will need to tweak some of the finer points, but the basic premise is there.

HTML

<div class='cross'></div>
<div class='circle'></div>
<div class='ellipse'></div>

CSS

div {
    position:relative;
    border:3px solid grey;
}
.cross {
    top:30px;
    left:90px;
    width:90px;
    height:30px;
}
.cross:before, .cross:after {
    display:block;
    content:'';
    position:absolute;
    height:30px;
    width:30px;
    background:white;
    border:3px solid grey;
}
.cross:before {
    top:-33px;
    left:27px;
    border-bottom:none;
}
.cross:after {
    top:29px;
    left:27px;
    border-top:3px solid white;
}
.circle {
    border-radius:999px;
    height:100px;
    width:100px;
    left:15px;
    top:30px;
}
.ellipse {
    border-radius:50%;
    height:200px;
    width:130px;
    top:30px;
}

edited Dec 17, 2013 at 15:58

answered Dec 17, 2013 at 15:33

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css - is it possible to make the following shape using only css and nothing else

1 Answer 1

See this FIDDLE

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related