7

Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3?

Here is the image

enter image description here

See the triangle inside that box? I want to do this. Thank you!

user1118321
  • 25,567
  • 4
  • 55
  • 86
  • It's possible, but not terribly pretty... I'll go hack something. – Niels Keurentjes Oct 05 '13 at 16:04
  • 3
    I'm voting a reopen on this question - if this kind of question isn't allowed we can't have **any** "how do I achieve complex effect X in CSS" questions whatsoever whilst these are often the interesting ones to discover tricks like I demonstrated below. If you don't know `border` works like this in corners you'll never think of it yourself. – Niels Keurentjes Oct 06 '13 at 11:39
  • you may also check this question : http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle-over-an-image – web-tiki Nov 04 '14 at 17:04

1 Answers1

10

Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode 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;
}

Working JSfiddle sample.

Or the full integrated sample here.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136