mũi tên tròn với CSS

Question

thể trùng lặp:
How to create a triangle in CSS3 using border-radius

Họ có thể thực hiện với CSS?

mũi tên bình thường:

.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/)

mũi tên Tròn (tôi muốn chỉ phía dưới cùng làm tròn):

:(

Answer 1

Vâng, bạn có thể: rotate hộp, hãy đặt cho nó border-radius và sử dụng 45deglinear-gradient làm background.

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%); 

} 

Nếu bạn muốn góc của mũi tên để thể khác nhau, sau đó bạn cũng có thể skew nó.

Hãy tính đến thực tế là CSS gradients are not supported by IE9 (Tôi không nói "hoặc cũ hơn" lần này vì bạn đề cập đến CSS3 trong số các thẻ của mình). Các giải pháp trong trường hợp đó sẽ là sử dụng một nền tảng vững chắc và bằng cách nào đó chắc chắn rằng phần trên sẽ không hiển thị, hoặc bằng cách bao phủ nó với một yếu tố trước đó, hoặc bằng cách cắt nó (xem the answer Tim Medora cung cấp).

Ngoài ra, vào thời điểm này vẫn chưa có sự hỗ trợ cho các cú pháp không tiền tố (mặc dù điều này sẽ sớm thay đổi: D), vì vậy bạn sẽ cần phải hoặc là tự thêm các tiền tố -webkit-, -moz-, và -o-. (Tôi không thêm chúng vào bản demo vì Dabblet sử dụng -prefix-miễn phí mà sẽ chăm sóc làm điều này.)

Answer 2

Đây là một cách để làm điều đó bằng cách đặt một hình vuông xoay bên trong một hộp để kiểm soát cắt. Cá nhân, tôi nghĩ rằng giải pháp của Ana là sạch hơn nhiều.

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>