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.
Jest to możliwe, ale niezbyt piękne ... Pójdę coś zhakować. –
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. –
możesz również sprawdzić to pytanie: http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle-over-an-image –