0

enter image description here

How does one make this little triangle bump at the bottom as on the picture bubble?

What is the best way to do it without using images?

Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
Slavik Ostapenko
  • 113
  • 1
  • 3
  • 10
  • 1
    Take a look at this https://css-tricks.com/snippets/css/css-triangle/ – Natalie Hedström Jan 08 '16 at 12:12
  • 1
    https://css-tricks.com/examples/ShapesOfCSS/ Has a lot of handy shapes. – Niet the Dark Absol Jan 08 '16 at 12:12
  • Using the `::after` CSS selector and `position` styling and giving the shape using `border` some of the colors of it being transparent – Ahs N Jan 08 '16 at 12:12
  • Google first https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20chat%20bubble. – tkay Jan 08 '16 at 12:14
  • Sure, this is not duplicate question but consice **design pattern** question. The thing has name 'Speech Bubble' and looks precisely as described in the question. – Brian Cannard Jan 08 '16 at 12:33
  • @IvanBorisenko: There are so many speech bubble questions in SO that have been asked and answered thoroughly already. There was no need for another one and it is rightly closed as duplicate. For example, [here](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow?lq=1) is one from the Linked posts section and I am sure you can find many of those. – Harry Jan 08 '16 at 12:38
  • 1
    @Harry yes, that linked one is great, thank you! – Brian Cannard Jan 08 '16 at 12:41

2 Answers2

1

This thing named 'Speech Bubble'.

p {
  font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
  font-weight: bold;
  margin: 1em 0;
}

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #fff;
  background: #0095ff;
}

.triangle-isosceles:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #0095ff transparent;
  display: block;
  width: 0;
}
<p class="triangle-isosceles">Address</p>

Check out this example: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Brian Cannard
  • 852
  • 9
  • 20
0

This is how it can be done:

.box {
  width: 200px;
  height: 25px;
  border-radius: 2px;
  padding: 5px;
  font-family: 'Arial';
  text-align: center;
  color: white;
  background-color: lightblue;
}

.box::after {
  content: ' ';
  position: relative;
  top: 36px;
  left: -75px;
  border-style: solid;
  border-width: 7px 7px 0;
  border-color: lightblue transparent;
}

Here is the JSFiddle demo

The ::after CSS pseudo is important, since that is what creates the little cursor at the bottom.

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • It is better to include local snippet instead of jsfiddle link. – Brian Cannard Jan 08 '16 at 12:30
  • 1
    I am not the one who downvoted but when you vote to close a question as a duplicate, it is better not to post an answer. From the timelines, your duplicate vote should have been cast before you answered. – Harry Jan 08 '16 at 12:31