1

I know it's quite easy to simply add a small triangle to the bottom of an element, but I want the background image to extend into the triangle. How could I achieve this?

Bobe
  • 2,040
  • 8
  • 29
  • 49
  • he knows how to make a speech bubble and adding a triangle, but he also wants the arrow to have background image used for speech buuble – gamehelp16 May 15 '13 at 09:34
  • @Mr.Alien You can make elements look like speech bubbles by adding rounded corners and an extra element or pseudo-element to make the triangle, but I need the background image of the bubble to extend into the triangle. – Bobe May 15 '13 at 09:34
  • @Bobe Where's the code/demo? – Mr. Alien May 15 '13 at 09:35
  • if you're after doing speech bubbles through pure css (no images) [this is pretty good site](http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) – Pete May 15 '13 at 09:53
  • This is a related question http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle – web-tiki Nov 21 '14 at 10:41

1 Answers1

5

Here I just answered something like this yesterday: Creating a transparent arrow above image in CSS3

But for having the triangle on the bottom, you would do something like this:

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    height:0;
    border-bottom:20px solid white;
    bottom:0;
}
.image:before {
    left:0;
    width:20px;
    border-right:16px solid transparent;
}
.image:after {
    left:36px;
    right:0;
    border-left:16px solid transparent;
}

and a DEMO

For something fancier you could also use masking and clip-path.

Community
  • 1
  • 1
Martin Turjak
  • 20,896
  • 5
  • 56
  • 76