Треугольник в CSS внутри коробки

Question

Ну, я не знаю, как правильно это объяснить. Здесь, проверьте этот снимок экрана, который имеет то, что я хочу сделать. Мой дизайнер дал мне это. Если я не найду решение, я буду использовать изображения и никакого кода. Можно ли это сделать с помощью CSS3?

Here is the image

Смотрите треугольник внутри этой коробки? Я хочу сделать это. Спасибо!

Answer 1

Творческое использование границ для достижения этого эффекта, никакие изображения не пострадали в следующем примере, и вы даже можете установить положение стрелки на самом элементе - становится более простым, если вы можете жестко запрограммировать его для своего дизайна.

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.