如何使用CSS3的圆弧形状？ [英] How to make arc shapes with CSS3?

问题描述

我试着用纯CSS实现下面的效果：

I'm trying to achieve following look, with pure css:

每个白色圆弧是不同的元素，例如span。我知道我们可以用css做圆形，但是怎么能变成圆弧形呢？

Where each white arc is a different element, say span. I know we can make round shapes with css, but how can it be turned into arc sort of shape?

推荐答案

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 。

这篇关于如何使用CSS3的圆弧形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！