CSS cho ribbon end

Question

Làm cách nào để vẽ phần cuối của dải băng như bên trái của hình ảnh này bằng cách sử dụng CSS?

Tôi biết tôi có thể sử dụng thực tế là các góc trong CSS được giảm thiểu, vì vậy tôi có thể có một đường viền 0 và các đường viền khác lớn hơn để cho tôi hình tam giác. Có cách nào để thực hiện điều này chỉ với 1 div không? Hay tôi cần phải xếp chồng một số hình tam giác? Tôi thực sự muốn có 1 div để người dùng không phải suy nghĩ về điều này và tôi chỉ có thể sử dụng phần tử giả CSS :before để chèn phần tử này. Cách tốt nhất để thực hiện điều này là gì?

IE9 + và các phiên bản hiện đại của các trình duyệt khác chỉ cần được hỗ trợ.

Answer 1

Có rất nhiều tài nguyên trên web hiển thị cách thực hiện việc này. Một hướng dẫn rất tốt là trực tuyến tại css-trick ở đây http://css-tricks.com/snippets/css/ribbon/

Ive cũng bị mắc kẹt trong một jsfiddle cho bạn vào đây để chơi với http://jsfiddle.net/WqNQU/

<h1 class="ribbon"> 
    <strong class="ribbon-content">Everybody loves ribbons</strong> 
</h1> 



.ribbon { 
font-size: 16px !important; 
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ 

width: 50%; 

position: relative; 
background: #ba89b6; 
color: #fff; 
text-align: center; 
padding: 1em 2em; /* Adjust to suit */ 
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ 
} 
.ribbon:before, .ribbon:after { 
content: ""; 
position: absolute; 
display: block; 
bottom: -1em; 
border: 1.5em solid #986794; 
z-index: -1; 
} 
.ribbon:before { 
left: -2em; 
border-right-width: 1.5em; 
border-left-color: transparent; 
} 
.ribbon:after { 
right: -2em; 
border-left-width: 1.5em; 
border-right-color: transparent; 
} 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 
content: ""; 
position: absolute; 
display: block; 
border-style: solid; 
border-color: #804f7c transparent transparent transparent; 
bottom: -1em; 
} 
.ribbon .ribbon-content:before { 
left: 0; 
border-width: 1em 0 0 1em; 
} 
.ribbon .ribbon-content:after { 
right: 0; 
border-width: 1em 1em 0 0; 
} 

Answer 2

HTML

<div class="ribbon"> 
    <strong class="ribbon-content">Everybody loves ribbons</strong> 
</div>​ 

CSS

.ribbon { 
    font-size: 16px !important; 
    width: 50%; 
    position: relative; 
    background: #ba89b6; 
    color: #fff; 
    text-align: center; 
    padding: 1em 2em; /* Adjust to suit */ 
    margin: 2em auto 3em; 
    } 
    .ribbon:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    bottom: -1em; 
    border: 1.5em solid #986794; 
    z-index: -1; 
    } 
    .ribbon:before { 
    left: -2em; 
    border-right-width: 1.5em; 
    border-left-color: transparent; 
    } 

.ribbon .ribbon-content:before { 
content: ""; 
position: absolute; 
display: block; 
border-style: solid; 
border-color: #804f7c transparent transparent transparent; 
bottom: -1em; 
} 
.ribbon .ribbon-content:before { 
left: 0; 
border-width: 1em 0 0 1em; 
} 

See Demo

Reference