Kreissegment mit CSS/CSS3

Gibt es eine Variante, um Kreissegment nur mit CSS/CSS3 zu zeichnen.Kreissegment mit CSS/CSS3

Kreissegment - http://en.wikipedia.org/wiki/Circular_segment (Ich brauche das grüne Teil des Kreises)

ich dies versuchte:

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

Aber es sieht nicht wie Kreissegment.

Quelle

2012-04-25 Maryna

Können Sie ein Bild oder etwas bereitstellen, das zeigt, was Sie erreichen möchten? –

@OllyHodgson [link] (http://en.wikipedia.org/wiki/Circular_segment) - überprüfen Sie diesen Artikel auf Wikipedia. Ich brauche diesen grünen Teil des Kreises. Es sollte ca. Breite: 86px und Höhe: 22px (und es ist wie 1/2 des vollen Radius (nicht Durchmesser) des Kreises). – Maryna

Die Breite und die Höhe des div sollen gleich sein, einen Kreis zu erzeugen.
zB: http://jsfiddle.net/wGzMd/

ist die CSS:

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

EDIT (für Segment):

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>

Quelle

2012-04-25 10:45:15 Ankit

danke, aber ich brauche keinen Vollkreis, sondern nur Segment. Sie können diesen Artikel [link] (http://en.wikipedia.org/wiki/Circular_segment) überprüfen, um klar zu verstehen, was ich zu erreichen versuche – Maryna

Maryna, PLZ überprüfen Sie den neuen Code für Segment mit Geige: http://jsfiddle.net/wGzMd/3/ – Ankit

Sie sind Genie! Es ist genau das, was ich brauche!Ich schlage vor, dass Sie zu css-tricks schreiben, um diese Form zur Seite hinzuzufügen! – Maryna

Halbkreis: 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;}

Quelle

2012-04-25 10:41:16

@Peteris, die Hälfte des Kreises ist einfach, aber ich brauche weniger als die Hälfte :) Ich habe meine Frage mit einem Link zu Wikipedia aktualisiert, um meine Frage zu klären – Maryna

überprüfen Hey auf diese Seite http://css-tricks.com/examples/ShapesOfCSS/

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

und diese

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>

Live-Demo http://jsfiddle.net/carTT/

und jede Form in reinen CSS erstellen, wie wie Sie .................

Quelle

2012-04-25 12:15:47

danke, ich habe vorher CSS-Tricks Artikel überprüft, aber nicht gefunden, was ich suche. – Maryna

Ich habe meine ANS aktualisiert, bitte überprüfen Sie css html –

Live-Demo http://jsfiddle.net/carTT/ –

Antwort

Verwandte Themen