Trójkąt CSS z obrazem tła

Question

Uznane stackoverflowers,

Jak utworzyć element trójkąta ze wzorem tła?

Na przykład muszę div tak:

Ale mój stan jest tak:

Wszystkie przykłady z elementami trójkąta korzystania granice, które mogę mieć img w tym ...

To jest moja klasa podsekcji, która potrzebuje coolarrow:

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

A im uzyskiwanie:

Który jest w porządku ... jak mogę przynieść strzałkę na górze w wymaganej formie? ... i nakładki na div? ... Dzięki.

Answer 1

Jeśli nie dbać o wzajemnej zgodności przeglądarki, można użyć pseudo-element, który można obracać o 45 stopni i dołączyć do niego style. Jedyną rzeczą, którą musisz dodatkowo będzie tło, obracać (z tyłu) przez 45deg dołączyć do elementu pseudo:

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

Oto krótka skrzypce do zilustrowania (bez tła):
Fiddle

Aby rozwiązać ten problem w innych przypadkach, ale za pomocą strzałek o 90 stopniach, należy dodatkowo przekręcić prostokąt. I naprawdę nie wiem, co wtedy dzieje się z obrazem w tle ...

Answer 2

Umieść obraz jako tło dla elementu div, a następnie umieść ujemne wartości marginesu, aby nadpisać go na pasku. Przykład (chociaż oszacowano, w żaden sposób nie twierdzę, że to działa) pozostałyby marginesy: -20px; margin-top: -20px; i mieć to po linii.

Można również użyć odpowiedzi @ Py, a można użyć tego CSS dla strzałki i zrobić to samo ujemne marginesy, aby ustawić linię.

#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ść na http://apps.eky.hk/css-triangle-generator/ i wygenerować go: D

LUB

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