Hướng dẫn gradient triangle css - gradient tam giác css

7

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi cần tạo nút có hình tam giác ở một bên (như http://css-tricks.com/triangle-readcrumbs/) này với độ dốc và đường viền dọc tuyến tính, và tôi muốn sử dụng CSS3 thuần túy. Không sao nếu tôi cần "hình tam giác" 45deg, tôi chỉ viết smth như thế nàyhttp://css-tricks.com/triangle-breadcrumbs/) with linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need 45deg "triangle", I just write smth like this

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

và ẩn một nửa của yếu tố giả dưới .button (vì vậy chỉ có một nửa khác có thể nhìn thấy, giống như một 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ó vòng quay và tỷ lệ. Tôi có thể sử dụng ví dụ: 2 Divs, một cho nửa trên của tam giác và một cho đáy, nhưng có thể có một vấn đề với đường viền và độ dốc.

Có lẽ có thể làm điều đó với nhiều độ dốc với các điểm dừng màu?

web-tiki

94,8K31 Huy hiệu vàng211 Huy hiệu bạc244 Huy hiệu đồng31 gold badges211 silver badges244 bronze badges

Khi được hỏi ngày 14 tháng 5 năm 2012 lúc 8:57May 14, 2012 at 8:57

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 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ể tạo hình ảnh chuyển đổi theo cùng một cách và chuyển đổi nó 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");
});

Đã trả lời ngày 14 tháng 5 năm 2012 lúc 9:45May 14, 2012 at 9:45

James Wrightjames WrightJames Wright

3.0111 Huy hiệu vàng17 Huy hiệu bạc26 Huy hiệu đồng1 gold badge17 silver badges26 bronze badges

2

Có, nó có thể được thực hiện chỉ bằng cách sử dụng gradient CSS. Bạn chỉ cần đặt ba gradient lên trên cái kia (hãy nhớ rằng cái đầu tiên bạn liệt kê là một lớp trên đầu). Một ở phía dưới (lần cuối cùng được liệt kê) là độ dốc dọc của bạn. Trên hết, bạn có hai độ dốc cũng sử dụng các điểm dừng màu.

Một cái gì đó 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ỏ có thể được nhìn thấy tại: http://dabblet.com/gist/2705739

Đã trả lời ngày 15 tháng 5 năm 2012 lúc 23:08May 15, 2012 at 23:08

AnaanaAna

34,5K6 Huy hiệu vàng77 Huy hiệu bạc124 Huy hiệu đồng6 gold badges77 silver badges124 bronze badges

Chỉ cần sử dụng clip-path với background-image

 .triangle {
    background-image: linear-gradient(rgba(#999, 0.4), rgba(#ccc, 0.5));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 100px;
    height: 100px;
 }

m4n0

28.1K26 Huy hiệu vàng73 Huy hiệu bạc87 Huy hiệu đồng26 gold badges73 silver badges87 bronze badges

Đã trả lời ngày 9 tháng 9 năm 2021 lúc 20:17Sep 9, 2021 at 20:17

OwenowenOwen

Phù hiệu đồng 4133 bronze badges

1

Bạn đã kiểm tra quy mô biến đổi CSS chưa? Với một 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 tái định cư kết quả.

transform: scaleY(0.5)

Example:

http://jsfiddle.net/xaddict/hjyru/ (ví dụ về webkit chỉ)

Chỉnh sửa: Đã thêm translateZ(0) để buộc kết xuất GPU trong WebKit (Biên giới chống Aliased, MHMMMM!)

Đã trả lời ngày 6 tháng 3 năm 2013 lúc 9:08Mar 6, 2013 at 9:08

xaddictxaddictxaddict

1.2783 huy hiệu vàng18 Huy hiệu bạc37 Huy hiệu đồng3 gold badges18 silver badges37 bronze badges