CSS triangle inside box

Question

Well, I don’t know how to explain it correctly. Here, check out this screenshot which has what I want to do. My designer gave me this. If I do not find a solution, I will use images and no code. Can this be done using CSS3?

Here is a picture

See the triangle inside this window? I want to do it. Thanks!

Answer 1

Creative use of borders to achieve this effect, no images were harmed in the following example, and you can even set the position of the arrow on the element itself - it becomes easier if you can rigidly set it for your design.

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

A working JSfiddle example .

Or a complete integrated sample here .