html – 如何用CSS3制作弧形？

概述我试图实现以下的外观，用纯CSS： 其中每个白色弧是不同的元素，说跨度。我知道我们可以用css做圆形，但是怎么能变成弧形呢？ 使用以下HTML： <div id="arcs"> <div> <div> <div> <div></div> </div> </div> </d 我试图实现以下的外观，用纯CSS：

其中每个白色弧是不同的元素，说跨度。我知道我们可以用CSS做圆形，但是怎么能变成弧形呢？

解决方法 使用以下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>

JS Fiddle demo。

总结

以上是内存溢出为你收集整理的html – 如何用CSS3制作弧形？全部内容，希望文章能够帮你解决html – 如何用CSS3制作弧形？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。