CODEWITHSUNDEEP
css
asdf
asdf

Reputation: 460

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

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.

Upvotes: 2

Views: 100

Answers (1)

SW4
SW4

Reputation: 71150

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;
}

Upvotes: 8

Related Questions