Create a Complex CSS Shape (Speaking Bubble)

Create a complex CSS shape (speaking bubble)

I had this thing that it could be done with just one element - and it can be done, I just don't think it's exactly the best solution to do it like this.

DEMO

HTML:

<div class='speech-bubble'>Hello!</div>

CSS:

.speech-bubble {
  position: relative;
  margin: .5em auto;
  padding: 1em;
  width: 10em; height: 4em;
  border-radius: .25em;
  transform: rotate(-4deg) rotateY(15deg);
  background: #629bdd;
  font: 2em/4 Century Gothic, Verdana, sans-serif;
  text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.speech-bubble:after {
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}
.speech-bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe;
  border-bottom: solid .25em #629bdd;
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
}

How to create a curve tail for speech bubble with CSS?

As webtiki says, you can get this result adapting my previous answer (Even though may be it is a little bit difficult)

.container {  width:300px;  margin:5px;}.test {position: relative;width: 300px;height: 150px;padding: 0px;background: pink;border-radius: 6px;}
.test:after {    content: '';    top: 1px;    right: -29px;    position: absolute;    border: 0px solid;    display: block;    width: 38px;     height: 26px;    background-color: transparent;    border-bottom-left-radius: 50%;    border-bottom-right-radius: 50%;    box-shadow: -21px 9px 0px 8px pink;}

<div class="container">  <div class="test"></div></div><img src="http://i.stack.imgur.com/MYlKY.png" alt="Sample Image">

Create Speech Bubble with CSS

I would create a circular pseudo-element, with a transparent background and border on only one side. Then use transform and position: absolute to manually set it in place.

You'll need to tweak the values depending on the desired size of the bubble and tail.

z-index: -1 hides the pseudo-element under its parent.

.bubble {  position: relative;  width: 50px;  height: 40px;    border-radius: 50%;    background-color: grey;}
.bubble::after {  position: absolute;  width: 40px;  height: 40px;    bottom: -2px;  left: -16px;    border-radius: 50px;  border-bottom: 8px solid grey;    transform: rotate(-55deg);  z-index: -1;  content: '';  }

<div class="bubble"></div>

How can i make div shape like this with css?

You can first create rectangle with border-radius and add triangle with :after pseudo-element.

.shape {  width: 200px;  height: 50px;  background: #B67025;  margin: 50px;  border-radius: 25px;  position: relative;}.shape:after {  content: '';  position: absolute;  border-style: solid;  right: 0;  top: 50%;  border-width: 10px 0 10px 10px;  transform: translate(80%, -50%);  border-color: transparent transparent transparent #B67025;}

<div class="shape"></div>

:before element not displaying outside div speech-bubble

Remove overflow: hidden and add your border-radius to both .image and .test
http://codepen.io/anon/pen/bFElG

How to create a speech bubble in which the arrow, or pointer, is part of the element, but the borders that make it are not?

clip-path using a polygon would keep the arrow part within the clickable area.

Here's a very simple example. Obviously the values can be changed to make the exact shape required:

.bubble {
  width: 90vmin;
  height: 40vmin;
  background-color: blue;
  clip-path: polygon(0 5%, 10% 5%, 15% 0, 20% 5%, 100% 5%, 100% 100%, 0 100% );
}

<div class="bubble"></div>

Building complex shapes with CSS

Your fiddle don't work in firefox (Aurora) or IE.

I know you prefer not using images but I think this would be alot cleaner in the code if you use just images.

Why? because you can create a sprite with 3 parts:
First part has the outer piece of the meter with the part of the bar transparent, second part has the "bar" and third part is just white to hide the bar and give the impression of percentages.

Then you do a simple javascript code for hidinging percentages of the bar starting right (like if user has 24 percent then position -76px).

I would have drawn the bar exactly as it shows full and use z-index to put the meter on top, then the white part to fake progress.
And a big circle in the beginning.

The circle will fill the round part in the end (i dont know what the current meter looks like there, if you have the line straight there then go with a square instead of circle).

Did a sketch in paint:

Sample Image

This version will be easier than pure CSS and will look alike on all browsers.
Resizing is also doable with some scripting in a fluid div and fluid image sizes.

Once you have a ratio you want to work with the rest is simple-ish.

Complex parallelogram button shapes

As you have yourself pointed out, generating the shape given in question is pretty easy and the below is a sample snippet on how to achieve it. The basic idea is to use a pseudo-element, add background to it and then skew it. The overflow: hidden on the parent would cut out the part of the shape that is not required and thus end up producing the shape.

ul {  list-style-type: none;  margin: 0;  padding: 0;  list-style-position: inside;}li {  position: relative;  height: 40px;  width: 300px;  margin: 10px;  padding-right: 30px;  line-height: 40px;  text-align: right;  text-transform: uppercase;  border-radius: 8px;  color: crimson;  overflow: hidden;}li:after {  position: absolute;  content: '';  left: 0;  top: 0;  height: 100%;  width: 100%;  background: rgba(0, 0, 0, 0.5);  transform: skew(45deg);  z-index: -1;}
/* just for demo */
body {  background: url(http://lorempixel.com/800/500/abstract/2);}*, *:after, *:before {  box-sizing: border-box;}

<ul>  <li>Menu Text 1</li>  <li>Menu Text 2</li>  <li>Menu Text 3</li></ul>

Create a Complex CSS Shape (Speaking Bubble)