如何用CSS3制作弧形？
如何用CSS3制作弧形？
提问于 2013-05-10 04:20:53
我试着用纯css实现下面的外观：
其中每个白色圆弧是一个不同的元素，比如span。我知道我们可以用css做圆形，但它怎么才能变成弧形呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-10 04:25:37
包含以下HTML：
<div id="arcs">
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>和CSS：
#arcs div {
border: 2px solid #000; /* the 'strokes' of the arc */
display: inline-block;
min-width: 4em; /* the width of the innermost element */
min-height: 4em; /* the height of the innermost element */
padding: 0.5em; /* the spacing between each arc */
border-radius: 50%; /* for making the elements 'round' */
border-top-color: transparent; /* hiding the top border */
border-bottom-color: transparent;
}
#arcs div {
border: 2px solid #000;
/* the 'strokes' of the arc */
display: inline-block;
min-width: 4em;
/* the width of the innermost element */
min-height: 4em;
/* the height of the innermost element */
padding: 0.5em;
/* the spacing between each arc */
border-radius: 50%;
/* for making the elements 'round' */
border-top-color: transparent;
/* hiding the top border */
border-bottom-color: transparent;
}<div id="arcs">
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16470412
复制相关文章
相似问题
腾讯云开发者
