Buttons Cạnh nghiêng

Question

Tôi đang cố gắng để xây dựng các nút mà trông như thế này:

tôi có thể thực hiện điều này bằng :after và CSS triangles, nhưng tôi không thể nhận được rằng làm việc với các yếu tố chiều cao khác nhau. Có cách nào để thực hiện điều này và giữ chiều cao biến?

Fiddle: http://jsfiddle.net/AaP47/2/

Answer 1

Bạn có thể sử dụng div bị lệch trong trường hợp này. Vấn đề duy nhất ở đây là khi các nút của bạn cao hơn, do độ nghiêng, chúng sẽ rộng hơn một chút. Đây có thể không phải là vấn đề nếu bạn chỉ giao dịch với 1 hoặc 2 dòng. Nếu họ nhận được rất cao nó có thể gây ra điều cần chú ý không khớp chính xác:

http://jsfiddle.net/AaP47/3/

.button.triangle:after { 
    content: ""; 
    background-color: red; 
    display: block; 
    height: 100%; 
    position: absolute; 
    right: -30px; 
    top: 0; 
    width: 60px; 
    transform: skewX(-10deg); 
} 

này cũng không phải là hoàn toàn khả năng mở rộng. Bạn sẽ cần phải quyết định chiều cao lớn nhất bạn phải hỗ trợ và điều chỉnh cho phù hợp. Bạn cần hỗ trợ cao hơn, div phải lệch càng rộng.

quả (không có màu đỏ): http://jsfiddle.net/AaP47/4/

Answer 2

Chỉ vì tôi đã mày mò vui vẻ theo một hướng khác và để cung cấp một khái niệm lựa chọn ngay cả khi bạn rõ ràng đã có một câu trả lời;

a { 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    display: inline-block;  
    border-right: 30px solid transparent; 
    border-top: 50px solid #4c4c4c;  
    height: 0; 
    line-height: 20px; 
} 
a p {margin-top: -45px;} 

và;

<a href="#"> 
    <p>this is a triangle button<br/> 
     with multiple lines!</p> 
</a> 

jfiddle: http://jsfiddle.net/AaP47/6/

Cheers!