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..

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How can I reduce the amount of vertical space between lines of text using CSS?

    How can I make my form take only a limited space?

    How to convert css margin value to pixels with just plain javascript?

    How do I get user-inputted information from the website directly to my e-mail?

    how to increase/decrease font-size from external css [closed]

    How can i apply background-image to low div

    How to create a vertical linear gradient for a GTK separator

    How can i get bootstrap to alter page CSS instead of lay dormant?

    css ul and li - multiple spans in each li and how to line up the spans vertically

    How to make a menu have submenus in pure CSS

    How can I remove hover style in CSS

    How to set different column in table to be different width in css?

    How do I absolute position a div from left to the right using media queries?

    How to separate css style from common to different statement

    jQuery date picker show half day blocked

    How to change content of a div by clicking a button outside the div?

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    How to retrieve the real height of a #div (including overflowed parts)

    How to make my PHP code, display in html table?

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    CSS and Javascript too tightly coupled (CSS is not just presentation but is used by UI and JS), how to improve this?

    How to activate jQuery function with img instead of button?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to resize image according from screen resolution on html css

    How to set a default location of a scrollbar

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    Modernizr: how do I detect CSS display:table-cell support?

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    how to use namespaces in css?