使用CSS / CSS3的循环段

时间:2012-04-25 10:37:59

标签: css css3

是否有任何变体只使用CSS / CSS3绘制circular segment

Circle with a dashed line across the top. The section within the line, the segment, is shaded green and is less than half of the cirle. Radius, segment height, etc. are also labeled.

我需要圈子的绿色部分。

我正在尝试这个:

div {
  width: 86px;
  height: 22px;
  background-color: green;
  border-bottom-right-radius: 42px;
  border-bottom-left-radius: 42px;
}
<div></div>

但它看起来不像圆形段。

3 个答案:

答案 0 :(得分:6)

div的宽度和高度应相同才能生成圆。
例如:http://jsfiddle.net/wGzMd/

这是css:

div{
position: absolute;
top: 50px;
left: 50px;
width:100px;
height:100px;
border: 1px solid green;
background: green;
border-radius: 360px;
} ​

<小时/> 编辑(针对细分):

http://jsfiddle.net/wGzMd/3/

CSS:

div.outerClass{
 position: absolute;
 left: 50px;
 top: 50px;
 height: 25px;
 overflow: hidden;
}

div.innerClass{
 width:100px;
 height:100px;
 border: 1px solid green;
 border-radius: 360px;
}

HTML:

<div class="outerClass"><div class="innerClass"></div></div>

答案 1 :(得分:4)

嘿,请查看此网站http://css-tricks.com/examples/ShapesOfCSS/

http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

和这个

http://www.css3shapes.com/

<强>的CSS

#oval {
width: 86px;
height: 22px;
background: green;
-moz-border-radius: 50px / 25px;
border-radius: 100px 100px 0 0 / 47px;
-webkit-border-radius: 100px 100px 0 0 / 47px;
}

<强> HTML

<div id="oval"></div>

现场演示http://jsfiddle.net/carTT/

并像你一样在纯css中创建任何形状.................

答案 2 :(得分:3)

半圈: http://www.paulund.co.uk/how-to-create-different-shapes-in-css

 div {
 height:45px;
 width:90px;
 border-radius: 0 0 90px 90px;
 -moz-border-radius: 0 0 90px 90px;
 -webkit-border-radius: 0 0 90px 90px;
 background:green;}