有没有使用CSS/CSS3绘制圆弧段的其他方法?
我需要圆形的绿色部分。
我尝试了这个:
div {
width: 86px;
height: 22px;
background-color: green;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
}
<div></div>
有没有使用CSS/CSS3绘制圆弧段的其他方法?
我需要圆形的绿色部分。
我尝试了这个:
div {
width: 86px;
height: 22px;
background-color: green;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
}
<div></div>
为了制作一个圆形,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>
360px
,它与角度无关。它只需要是元素高度的一半,即 50px
。 - Oliver Tappin嘿,看一下这个网站: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创建任何形状,就像您一样.................
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;}