Dairesel segment CSS/CSS3 kullanarak

Sadece CSS/CSS3 kullanarak dairesel bölüm çizmek için varyant var mı?Dairesel segment CSS/CSS3 kullanarak

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

Ama dairesel kesimi gibi görünmüyor: -

yay parçası http://en.wikipedia.org/wiki/Circular_segment

Bu çalışıyordu (Ben dairenin yeşil kısmı olduğu gerekir).

kaynak

2012-04-25 Maryna

Görüntülemeye veya elde etmeye çalıştığınız şeyi gösteren bir şey sağlayabilir misiniz? –

@OllyHodgson [bağlantı] (http://en.wikipedia.org/wiki/Circular_segment) - Bu yazıya Wikipedia'da bakın. Bu yeşil çember parçasına ihtiyacım var. Yaklaşık olmalı. genişlik: 86px ve yükseklik: 22px (ve dairenin tam yarıçapının (çap değil) yarısı kadardır). – Maryna

genişlik ve yükseklik bir çevre oluşturmak için aynı olmalıdır.
örn:

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

DÜZENLEME (segment için):

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

İşte http://jsfiddle.net/wGzMd/

css

HTML:

<div class="outerClass"><div class="innerClass"></div></div>

kaynak

2012-04-25 10:45:15 Ankit

sorumu açıklığa kavuşturmak için, ancak tam bir çevreye değil, yalnızca segmente ihtiyacım var. – Maryna

Maryna'ya ulaşmaya çalıştığım şeyi net bir şekilde anlamak için [link] (http://en.wikipedia.org/wiki/Circular_segment) bu makaleyi inceleyebilirsiniz: plz ile segment için yeni kodu kontrol edin: http://jsfiddle.net/wGzMd/3/ – Ankit

siz dehasınız! Tam olarak ihtiyacım olan şey bu!Bu formu siteye eklemek için css-tricks'e yazmanızı öneririm! – Maryna

yarım daire: div 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;}

kaynak

2012-04-25 10:41:16

@Peteris, dairenin yarısı kolay, ama yarısından daha azına ihtiyacım var :) Sorumlu olduğum soru, Wikipedia'ya bağlantıyla güncellendi, – Maryna

Hey bu sitede http://css-tricks.com/examples/ShapesOfCSS/

kontrol ederek bu http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

ve bu

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>

Canlı tanıtım http://jsfiddle.net/carTT/

ve senin gibi saf css herhangi bir şekil oluşturmak .................

kaynak

2012-04-25 12:15:47

teşekkürler, css-tricks makalesini daha önce kontrol ettim, ama aradığımı bulamadım. – Maryna

ans'ı güncelledim, lütfen css html'ye bakın. –

Canlı demo http://jsfiddle.net/carTT/ –

Dairesel segment CSS/CSS3 kullanarak

cevap

İlgili konular