Segmento circolare utilizzando CSS/CSS3

Esiste una variante per disegnare segmenti circolari utilizzando solo CSS/CSS3.Segmento circolare utilizzando CSS/CSS3

segmento circolare - http://en.wikipedia.org/wiki/Circular_segment (Ho bisogno di quella parte verde del cerchio)

stavo cercando questo:

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

Ma non sembra segmento circolare.

fonte

2012-04-25 Maryna

Puoi fornire un'immagine o qualcosa che mostra ciò che stai cercando di ottenere? –

@OllyHodgson [link] (http://en.wikipedia.org/wiki/Circular_segment) - controlla questo articolo su Wikipedia. Ho bisogno di quella parte verde del cerchio. Dovrebbe avere ca. larghezza: 86 px e altezza: 22 px (ed è pari a 1/2 del raggio completo (non del diametro) del cerchio). – Maryna

La larghezza e l'altezza del div dovrebbe essere lo stesso per la produzione di un cerchio.
esempio: http://jsfiddle.net/wGzMd/

Ecco l'css:

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

EDIT (per 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>

fonte

2012-04-25 10:45:15 Ankit

grazie, ma non ho bisogno di completare il cerchio, ma solo segmento. Puoi controllare questo articolo [link] (http://en.wikipedia.org/wiki/Circular_segment), per capire chiaramente cosa sto cercando di raggiungere – Maryna

Maryna, controlla il nuovo codice per il segmento con fiddle: http://jsfiddle.net/wGzMd/3/ – Ankit

sei un genio! È esattamente ciò di cui ho bisogno!Ti suggerisco di scrivere su trucchi css, per aggiungere questa forma al sito! – Maryna

Mezzo circolo: 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;}

fonte

2012-04-25 10:41:16

@Peteris, metà del cerchio è facile, ma ho bisogno di meno della metà :) Ho aggiornato la mia domanda con il link a Wikipedia, per chiarire la mia domanda – Maryna

Hey controllo per questo sito http://css-tricks.com/examples/ShapesOfCSS/

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

e questo

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>

demo dal vivo http://jsfiddle.net/carTT/

e creare qualsiasi forma in puro css come come te .................

fonte

2012-04-25 12:15:47

grazie, ho controllato l'articolo di css-tricks prima, ma non ho trovato quello che stavo cercando. – Maryna

ho aggiornato il mio ans, per favore controlla in css html –

demo dal vivo http://jsfiddle.net/carTT/ –

Segmento circolare utilizzando CSS/CSS3

risposta

Problemi correlati