Tạo tam giác CSS3 với dốc tuyến tính

Question

Tôi cần tạo nút có hình tam giác ở một bên (như thế này http://css-tricks.com/triangle-breadcrumbs/) với đường viền dọc và đường viền dọc, và tôi muốn sử dụng CSS3 tinh khiết. Đó là ok nếu tôi cần 45deg "tam giác", tôi chỉ viết smth như thế này

.button:after { 
    -webkit-transform: rotate(45deg); 
    background: -webkit-linear-gradient(-45deg, #fff, #000); 
    content: ''; 
    width: 2em; 
    height: 2em; 
    display: block; 
} 

và giấu một nửa số đó pseudo-yếu tố dưới .button (vì vậy chỉ một nửa trong số đó là có thể nhìn thấy, như một hình tam giác).

Nhưng nếu tôi cần một góc khác (ví dụ: dốc hơn) - Tôi không thể làm cho nó có bậc đứng XY xoay và chia tỷ lệ. Tôi có thể sử dụng ví dụ 2 div, một cho nửa trên của tam giác và một cho dưới cùng, nhưng có thể có một vấn đề với biên giới và gradient.

Có thể thực hiện điều đó với nhiều độ dốc với các điểm dừng màu?

Answer 1

Tôi hy vọng điều này sẽ giúp bạn tôi đã thực hiện tốt nghiệp tam giác ient chỉ với một div với css thuần túy.

http://jsfiddle.net/NDJ3S/15/

CẬP NHẬT

Kiểm tra nó bây giờ làm việc của nó: - http://jsfiddle.net/NDJ3S/17/

Answer 2

Vì vậy, tôi biết rằng bạn muốn làm điều này với CSS, nhưng tôi luôn luôn làm điều này trong SVG:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

<defs> 
<linearGradient id="fill" x1="0%" y1="0%" x2="0%" y2="100%"> 
<stop offset="0%" style="stop-color:rgb(224,224,224);stop-opacity:1"/> 
<stop offset="100%" style="stop-color:rgb(153,153,153);stop-opacity:1"/> 
</linearGradient> 
</defs> 

<path d="M 0 0 L 64 0 L 32 64 z" stroke="colourname" fill="url(#fill)"/> 

</svg> 

Bạn có thể nhúng nó như vậy:

<img src="triangle.svg" alt="Triangle" class="triangle" /> 

Bạn cũng có thể làm cho chuyển đổi hình ảnh theo cùng một cách và chuyển đổi hình ảnh đó bằng JavaScript hoặc jQuery:

$(".triangle").click(function() 
{ 
    if($(this).attr("src") == "triangle.svg") 
     $(this).attr("src", "triangledown.svg"); 

    else $(this).attr("src", "triangle.svg"); 
}); 

Answer 3

Vâng, nó có thể được thực hiện chỉ sử dụng gradient CSS. Bạn chỉ cần đặt ba gradient trên đầu trang của người khác (ghi nhớ rằng người đầu tiên bạn liệt kê là một trên đầu trang). Một ở phía dưới (danh sách cuối cùng được liệt kê) là gradient dọc của bạn. Trên đầu trang của nó, bạn có hai gradient mà cũng làm cho việc sử dụng các điểm dừng màu.

Something như thế này:

background: linear-gradient(30deg, transparent 37%, #fff 37%), 
      linear-gradient(-30deg, transparent 37%, #fff 37%), 
      linear-gradient(to bottom, #ccc, #000); 

Tôi đã thực hiện một bản demo nhỏ mà có thể được nhìn thấy tại địa chỉ: http://dabblet.com/gist/2705739

Answer 4

Bạn đã kiểm tra css chuyển scaleY? Với phần tử khác xung quanh mũi tên (hoặc có lẽ với phần tử giả), nó cho phép bạn rescale kết quả.

transform: scaleY(0.5) 

Ví dụ:

http://jsfiddle.net/xaddict/hJyrU/ (webkit chỉ dụ)

EDIT: thêm translateZ(0) để buộc kết xuất GPU trong webkit (biên giới anti-aliased, mhmmmm!)