Segmento circular con CSS/CSS3

¿Hay alguna variante para dibujar un segmento circular usando solo CSS/CSS3?Segmento circular con CSS/CSS3

segmento circular - http://en.wikipedia.org/wiki/Circular_segment (Necesito que parte verde del círculo)

Yo estaba tratando esto:

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

Pero no se parece segmento circular.

Fuente

2012-04-25 Maryna

¿Puede proporcionar una imagen o algo que muestre lo que está tratando de lograr? –

@OllyHodgson [link] (http://en.wikipedia.org/wiki/Circular_segment) - consulte este artículo en Wikipedia. Necesito esa parte verde del círculo. Debe tener aprox. ancho: 86px, y alto: 22px (y es como 1/2 del radio completo (no el diámetro) del círculo). – Maryna

La anchura y la altura de la div deben ser el mismo para producir un círculo.
por ejemplo: http://jsfiddle.net/wGzMd/

Aquí está el css:

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

EDIT (por segmento):

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>

Fuente

2012-04-25 10:45:15 Ankit

gracias, pero no necesito un círculo completo, sino solo segmentar. Puede consultar este artículo [enlace] (http://en.wikipedia.org/wiki/Circular_segment), para comprender claramente lo que estoy tratando de lograr – Maryna

Maryna, por favor revise el nuevo código para el segmento con violín: http://jsfiddle.net/wGzMd/3/ – Ankit

eres genio! ¡Es exactamente lo que necesito!¡Te sugiero que escribas en css-tricks, para agregar esta forma al sitio! – Maryna

Medio círculo: 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;}

Fuente

2012-04-25 10:41:16

@Peteris, la mitad del círculo es fácil, pero necesito menos de la mitad :) Actualicé mi pregunta con un enlace a Wikipedia, para aclarar mi pregunta – Maryna

Hey comprobar a este sitio http://css-tricks.com/examples/ShapesOfCSS/

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

y esto

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>

Demostración en directo http://jsfiddle.net/carTT/

y crear cualquier forma en css puro como como si .................

Fuente

2012-04-25 12:15:47

gracias, revisé el artículo de css-tricks antes, pero no encontré lo que estoy buscando. – Maryna

He actualizado mi ans compruebe en css html –

Demostración en vivo http://jsfiddle.net/carTT/ –

Respuesta

Cuestiones relacionadas