是否有任何变体只使用CSS / CSS3绘制circular segment?
我需要圈子的绿色部分。
我正在尝试这个:
div {
width: 86px;
height: 22px;
background-color: green;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
}
<div></div>
但它看起来不像圆形段。
答案 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;
}
<小时/> 编辑(针对细分):
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/
和这个
<强>的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;}