使用CSS / CSS3的循环段

前端之家收集整理的这篇文章主要介绍了使用CSS / CSS3的循环段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有任何变体只使用CSS / CSS3绘制圆形段.

圆形段 – http://en.wikipedia.org/wiki/Circular_segment(我需要圆圈的绿色部分)

我在尝试这个:

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

但它看起来不像圆形段.

@H_502_10@

解决方法

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>
@H_502_10@ @H_502_10@ 原文链接:https://www.f2er.com/css/215956.html

猜你在找的CSS相关文章