css - 是否可以仅使用css而不是其他内容来制作以下形状

Question

有没有办法只使用CSS制作如下形状。

我是一个新手，所以我真的不太了解，我已经googling几个小时但没有。哦，我发现了这个链接http://www.css3shapes.com/，但我不知道如何使用那里的代码来制作上面的形状，这也是http://jsfiddle.net/JvdKk/哦，边框是3pt。“ / p>

Answer 1

See this FIDDLE

你需要调整一些更好的点，但基本前提是那里。

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