Круговой сегмент с помощью 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;}

но это не похоже на круговой сегмент.

8
circular css css3 segment

3 ответов

ширина и высота 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;
} ​

EDIT (для сегмента):

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>
6

Эй, проверьте этот сайт 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, как вам нравится .................

4

полкруга: 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;}
3