2013-10-05 31 views
7

Cóż, nie wiem jak to wyjaśnić poprawnie. Tutaj sprawdź ten zrzut ekranu, który ma to, co chcę zrobić. Mój projektant dał mi to. Jeśli nie znajdę rozwiązania, użyję obrazów i kodu. Czy można to zrobić z CSS3?Trójkąt w CSS wewnątrz pudełka

Here is the image

enter image description here

Zobacz trójkąt wewnątrz tej skrzyni? Chce to zrobić. Dziękuję Ci!

+0

Jest to możliwe, ale niezbyt piękne ... Pójdę coś zhakować. –

+3

Głosuję za ponownym otwarciem na to pytanie - jeśli tego rodzaju pytanie jest niedozwolone, nie możemy mieć ** żadnego ** "jak uzyskać złożony efekt X w CSS", podczas gdy te są często interesujące odkryć sztuczki, które pokazałem poniżej. Jeśli nie wiesz, że 'granica' działa tak w rogach, nigdy nie pomyślisz o tym sam. –

+0

możesz również sprawdzić to pytanie: http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle-over-an-image –

Odpowiedz

10

Kreatywne użycie obramowań w celu uzyskania tego efektu, żadne obrazy nie zostały uszkodzone w poniższym przykładzie, a nawet można ustawić położenie strzałki na samym elemencie - staje się prostsze, jeśli możesz go zakodować na stałe.

HTML

<div class="top"> 
    <span class="arrow" style="left:40%"></span> 
</div> 

CSS

.top { 
    background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg); 
    background-size:cover; 
    width:300px; 
    height:300px; 
    border:1px solid #888; 
    position:relative; 
    overflow:hidden; 
} 
.arrow { 
    border:30px solid #aaa; 
    border-bottom:none; 
    border-color:transparent #aaa transparent #aaa; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
.arrow:before, .arrow:after { 
    content:''; 
    position:absolute; 
    width:5000px; 
    bottom:0; 
    height:30px; 
    background:#aaa; 
} 
.arrow:before { 
    right:30px; 
} 
.arrow:after { 
    left:30px; 
} 

Working JSfiddle sample.

Or the full integrated sample here.

+0

+1 schludny i szybki :) – Harry

+0

+1 działał jak urok! jesteś wspaniały! –

Powiązane problemy