How to create a speech bubble with css only


Tags: html,css,css3,geometry,css-shapes

Problem :

I want to make a speech bubble and I'm almost achieving my goal. Just a simple thing that is driving me crazy.

Check HERE to see my code and what I need.

I tried this:

HTML:

<div class="date">
    03 Fev 14
</div>

CSS:

.date{
    display: block;
    width: 50px;
    font-weight: 400;
    background-color: #00a1e0;
    color: #FFFFFF;
    font-size: 11px;
    text-transform: uppercase;
    padding: 10px 15px;
    position: relative;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 20px;
}

.date:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 6px 0;
    border-color: #00a1e0 transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -10px;
    left: 0px;
}

As you can see, at the moment I have a triangle with two angles of 45degrees, and I want it to have an angle of 90degrees on top aligned to the left.

How can I achieve this without the use of an additional image?



Solution :

You need to add the last value for border-width. Try this:

.date:after {
    border-width: 10px 10px 0 0;
}

.date {
  display: block;
  width: 50px;
  font-weight: 400;
  background-color: #00a1e0;
  color: #FFFFFF;
  font-size: 11px;
  text-transform: uppercase;
  padding: 10px 15px;
  position: relative;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  margin-bottom: 20px;
}
.date:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #00a1e0 transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 100%;
  left: 0px;
}
<h3>What I want: (image)</h3>
<img src="http://i.imgur.com/wlyK9EN.png">
<br>
<br>
<h3>What I have:</h3>
<div class="date">
  03 Fev 14
</div>


    CSS Howto..

    Am centering content vertically using css, how to remove empty space?

    How to define dynamic height in css (or html)?

    How to create a vertical linear gradient for a GTK separator

    How to make a horizontal div scroll bar float like a fixed CSS div

    How can I get the body to continue look the same when a div inside overflows to the right?

    CSS `will-change` - how to use it, how it works

    How to use a CSS animation within a JavaScript plugin?

    Javascript: How do I check a css style and then change another css style?

    On Edge Browser, how to change input placeholder text color using CSS?

    How to control the layout in JSF?

    IE11 CSS bug with clear:right - how to workaround?

    How to achieve CSS transitions with delay timers but without any easing function?

    How to implement a finished coded html/css page into CMS [closed]

    How to target entire Bootstrap navbar

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to convert a css only megamenu to jquery based

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    Dropdown menu. make it show onclick and not onmouseover

    Live search div not showing up when something is entered

    How to make the long text to fit inside a small div?

    How do I get a div to change the max-height upon window resize?

    How to apply dynamic CSS for the label in IE7

    How to properly apply a css hack for IE11 transition misbehaviour

    How to positioning the tooltip above cursor

    CSS How to properly replace links by button background

    How to stick a div when scrolled past 50% of the item?

    How to code a scrolling frame in css

    How can I use :before property to create a square before a span

    How do I place a
    beside an image?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?