css - 是否可以仅使用 css 而不使用其他任何东西来制作以下形状

Question

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

我是新手，所以我真的不太了解，而且我一直在 google 上搜索了几个小时，但一无所获。哦，我找到了这个链接http://www.css3shapes.com/但我不知道如何使用那里的代码来制作上面的形状，这也是http://jsfiddle.net/JvdKk/哦，边界是 3pt 在 word 中。

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