Biểu ngữ có hình dạng góc cạnh

Question

Tôi đang cố gắng tạo biểu ngữ có hình tam giác ở cuối.

.wrapper { 
 
    padding: 50px; 
 
    font-size: 0px; 
 
    line-height: 0%; 
 
    width: 0px; 
 
    border-top: 20px solid gray; 
 
    border-bottom: 20px solid gray; 
 
    border-right: none; 
 
}

<div class="wrapper">TEXT HERE</div>

Answer 1

Chỉ giúp bạn ra ngoài với điều này như y ou've cố gắng nhưng nó không làm việc như bạn mong đợi ... Vì vậy, ý tưởng cơ bản là chúng ta có thể sử dụng các yếu tố CSS pseudo để tạo ra hiệu ứng mà ..

Demo

.wrapper { 
    background: #C3C3C3; 
    padding: 20px; 
    font-size: 40px; 
    font-family: Arial; 
    text-align: center; 
    position: relative; 
} 

.wrapper:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 42px solid transparent; 
    border-bottom: 42px solid transparent; 
    border-right: 40px solid white; /* Tweak this to increase triangles height */ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Ở đây, đang làm gì ưa thích, chúng tôi đang sử dụng một phần tử giả nghĩa là không có gì ngoài một phần tử ảo không tồn tại trong DOM nhưng chúng ta có thể chèn nó bằng cách sử dụng CSS và định vị phần tử giả ở phía bên phải của trình bao bọc của bạn. Điều này sẽ giúp bạn có được ribbon như kết thúc. Lưu ý rằng màu của tam giác được mã hóa cứng và màu không trong suốt.

Answer 2

Hãy thử điều này nó hoạt động

.wrapper { 
 
    font-family: arial; 
 
    font-size: 12px; 
 
    color: white; 
 
    background-color: black; 
 
    border: 1px solid white; 
 
    padding: 8px; 
 
    width: 100px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-top: 16px solid transparent; 
 
    border-bottom: 16px solid transparent; 
 
    border-right: 16px solid white; 
 
    z-index: 10; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div class="wrapper">TEXT HERE</div>

Answer 3

đây là điểm nổi bật. https://jsfiddle.net/nileshmahaja/s5egaebr/

Tôi đã sử dụng: sau khi chọn đến div trình bao bọc.

CSS

.wrapper { 
    padding: 0 50px; 
    font-size: 0px; 
    line-height: 0%; 
    width: 0px; 
    height:120px; 
    background:#ddd; 
    position:relative; 
    width:500px; 
} 

.wrapper:after { 
    content:''; 
    width: 0px; 
    height: 0px; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-right: 60px solid #fff; 
    position:absolute; 
    right:0 
}