Hình tam giác CSS có hình nền

Question

Stackoverflowers được tôn trọng,

Làm cách nào để tạo phần tử hình tam giác với mẫu nền?

Ví dụ tôi cần div như thế này:

Nhưng tình trạng của tôi là như thế này:

Tất cả các ví dụ với các yếu tố tam giác sử dụng biên giới mà không thể có một img trong đó ....

Đây là lớp phụ của tôi cần giải nhiệt:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div> 

.subsection { 
    .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3)); 
    background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern 
    display: block; 
    clear: both; 
    float: left; 
    width: 100%; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    display: none; 
} 
.subsection { 
    position:relative; 
} 
.subsection:before { 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    height:20px; 
    width:0; 
    border-left:20px solid white; 
    border-bottom:16px solid transparent; 
} 
.subsection:after { 
    content:''; 
    position:absolute; 
    top:36px; 
    left:0; 
    bottom:0; 
    width:0; 
    border-left:20px solid white; 
    border-top:16px solid transparent; 
} 

Và im nhận:

nào là tốt ... làm thế nào tôi có thể mang vào mũi tên trên đầu trang trong các hình thức yêu cầu? ... và che phủ các trường hợp div? ... Cảm ơn.

Answer 1

Nếu bạn không quan tâm đến khả năng tương thích trình duyệt chéo, bạn có thể sử dụng phần tử giả mà bạn xoay 45 độ và đính kèm phong cách cho nó. Điều duy nhất bạn cần bổ sung sẽ là nền, xoay (trở lại) bởi 45deg để đính kèm vào các yếu tố giả:

div.coolarrow:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: -24.7px; 
    left: 10px; 
    background-color: #bada55; 
    width: 50px; 
    height: 50px; 

    background: url(url/to/your/45deg/rotated/background.gif); 

    box-shadow: inset 0 0 10px #000000; 
    transform: rotate(45deg); 
} 

Dưới đây là một fiddle ngắn để minh họa (không nền):
Fiddle

Để làm việc này cho các trường hợp khác nhưng mũi tên 90 độ, bạn cần phải nghiêng bổ sung trực tiếp. Và tôi không thực sự biết những gì xảy ra sau đó với hình ảnh nền ...

Answer 2

Đặt hình ảnh làm nền cho div và chỉ đặt giá trị âm cho lề để làm cho nó phủ lên trên thanh. Ví dụ (mặc dù ước tính, không có cách nào để tôi yêu cầu điều này để làm việc) sẽ là lề trái: -20px; margin-top: -20px; và có nó sau khi dòng.

Hoặc đi với câu trả lời của @ Py và bạn có thể sử dụng CSS này cho mũi tên, và thực hiện cùng một lề tiêu cực để làm cho nó xếp hàng.

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; } 

Answer 3

đi trên http://apps.eky.hk/css-triangle-generator/ và tạo ra nó: D

HOẶC

#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
}