Yuvarlak oklar

Question

Olası Çoğalt: onlar CSS ile yapmak mümkün
How to create a triangle in CSS3 using border-radius

musunuz?

Normal ok:

.some_element:after{  
    content: ''; 
    height: 0; 
    width: 0; 
    position: absolute;   
    top: 0; 
    left: 0;  
    border: 100px solid transparent; 
    border-top-color: #000;   
} 

(http://jsfiddle.net/W3xwE/)

Yuvarlak ok (Ben sadece alt tarafı yuvarlak istiyorum):

:(

Answer 1

Evet, Bu mümkün! Sen rotate kutuya bir border-radius verin ve 45deglinear-gradient'u background olarak kullanın.

DEMO

HTML:

<div class='arrow'></div> 

CSS:

.arrow { 
    width: 7em; 
    height: 7em; 
    border-radius: 0 0 2em 0; 
    margin: 5em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, black 50%, transparent 50%); 

} 

Eğer ok açısı farklı olmasını istiyorsanız

, o zaman da yapabilirsiniz skew o.

CSS gradients are not supported by IE9 (Etiketlerinizin arasında CSS3'ten bahsettiğiniz için bu sefer "veya daha büyük" demiyorum) gerçeğini göz önünde bulundurun. Bu durumda çözüm, sağlam bir arka plan kullanmak ve bir şekilde bir önceki elemanla kaplayarak ya da keserek üst bölümün gösterilmemesini sağlamaktır (bkz. the answer Tim Medora). , Ya elle önekleri -webkit-, -moz- ve -o- eklemeniz gerekecektir böylece:

Ayrıca, bu noktada (D bu yakında değişecek rağmen) hala öneksiz sözdizimi için destek yoktur. (Dabblet'in bunu yapması gereken -prefix-free kullanması nedeniyle bunları demoda eklemedim.)

Answer 2

Bu, kırpma kontrolü için bir kutunun içine döndürülen bir kare yerleştirerek bunu yapmanın bir yoludur. Şahsen, sanırım @ Ana'nın çözümü çok daha temiz.

http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div> 

#inner{ 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background-color:silver; 
    width:100px; 
    height:100px; 
    top: -70px; 
    left: 20px; 
    position:relative; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 

#outer { 
    position: absolute; 
    width: 140px; 
    height: 70px;  
    top:10px; 
    left:10px; 
    overflow: hidden;  
    border: 1px solid red; 
} 

Answer 3

CSS

.arrow { 
     width: 7em; 
     height: 7em; 
     border-radius: 0 0 2em 0; 
     margin: -2em 2.5em; 
     transform: rotate(45deg); 
     background: linear-gradient(-45deg, black 50%, transparent 50%); 

    } 

HTML

<div class='arrow'></div>