Circular segment mit CSS/CSS3

Gibt es eine Variante zu ziehen circular segment mit CSS/CSS3?

Circular segment mit CSS/CSS3

Muss ich, dass der grüne Teil des Kreises.

Ich versuchte dieses:

CSS:

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

HTML:

<div></div>

Aber es sieht nicht aus wie ein Kreissegment.

  • Können Sie uns ein Bild oder etwas zu zeigen, was Sie zu erreichen versuchen?
  • link - Lesen Sie diesen Artikel auf Wikipedia. Ich brauche das grüne Teil des Kreises. Es sollte schon ca. Breite:86px und height:22px (und es ist wie 1/2 der vollen radius (nicht der Durchmesser) des Kreises).
InformationsquelleAutor Maryna | 2012-04-25
  1. 6

    Die Breite und Höhe des div-sollten identisch sein um einen Kreis zu erzeugen.

    z.B.: http://jsfiddle.net/wGzMd/

    Hier ist der css:

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

    BEARBEITEN (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>
    • danke, aber ich brauche nicht den vollen Kreis, aber nur segment. Sie können Lesen Sie diesen Artikel link , um klar zu verstehen, was ich versuche zu erreichen
    • Maryna, plz überprüfen Sie den neuen code für das segment mit der fiddle: jsfiddle.net/wGzMd/3
    • Sie sind Genies! Es ist genau das, was ich brauche! Ich schlage vor, Sie zu schreiben, css-tricks, an die add this Form to site!
    • Der border-radius nicht 360px hier, es hat nichts zu tun mit Grad. Es geht nur um die Hälfte der Höhe des Elements, in diesem Fall 50px.
    InformationsquelleAutor Ankit
  2. 4

    Hey schauen Sie zu dieser Website 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 kreieren, die in reinem css als wie Sie .................

    • vielen Dank, ich habe css-tricks-Artikel vor, aber nicht finden was ich Suche.
    • ich habe aktualisiert mein ans-bitte überprüfen Sie zur-css-html
    • Live-demo jsfiddle.net/carTT
    • das ist viel näher an das, was ich will. Wenn nur dies kann ein wenig glatter. Können Sie mir erklären, was bedeutet "/ 47px" bedeuten?
    • ok, ich fand die Antwort auf css-tricks.com/almanac/properties/b/border-radius und das ist wahrscheinlich, was ich brauche. Nur zu spielen, um mit diesen Werten. Danke!
    InformationsquelleAutor Rohit Azad
  3. 3

    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;}
    • die Hälfte der Kreis ist einfach, aber ich brauche weniger als die Hälfte:) ich aktualisierte meine Frage mit link zu Wikipedia, um zu klären, meine Frage
    InformationsquelleAutor
Schreibe einen Kommentar