我试图实现以下的外观,用纯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>
原文地址:https://www.jb51.cc/html/233057.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。