CSS-треугольник с фоновой картиной

Question

Соответствующие штатные конвертеры,

Как создать элемент треугольника с фоновым рисунком?

Например мне нужно DIV так:

Но мое состояние, как это:

Все примеры с треугольными элементами использовать границы, которые не могу иметь в IMG в том, что ....

Это мой класс подраздела, который нуждается в круговороте:

<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; 
} 

И им получать:

Что хорошо ... как я могу привести стрелку на первое место в требуемой форме? ... и наложения дел div? ... Спасибо.

Answer 1

Если вы не заботиться о перекрестной совместимости браузера, вы можете использовать псевдо-элемент, который поворачивается на 45 градусов и прикрепить стили к нему. Единственное, что вам нужно дополнительно будет фон, вращать (назад) на 45 градусов, чтобы прикрепить к псевдо элементу:

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); 
} 

Вот короткая скрипка, чтобы показать (без фона):
Fiddle

Чтобы справиться с этим в других случаях, но стрелки в 90 градусов, вам нужно перекосить лишнее. И я не знаю, что тогда происходит с фоновым изображением ...

Answer 2

Поместите изображение в качестве фона для div и просто поставьте отрицательные значения для поля, чтобы он накладывался на панель. Пример (хотя и оценивается, ни в коем случае не утверждаю, что это работает) будет margin-left: -20px; margin-top: -20px; и иметь его после строки.

Альтернативно, ответьте на @ Py, и вы можете использовать этот CSS для стрелки и сделать те же отрицательные поля, чтобы он выстраивался в линию.

#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

идти на http://apps.eky.hk/css-triangle-generator/ и его генерации: D

ИЛИ

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