I would like to create a speech like this,
I try to create using CSS. But I cannot align the top arrow like this. My Code is,
.bubble
{
position: relative;
width: 275px;
height: 40px;
padding: 5px;
background: #C00006;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 79px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -19px;
top: -79px;
left: 69%;
}
<br><br><br><br>
<div class="bubble"></div>
Online example (on JSFiddle).
You could achieve that by using skewX
transform and specifying the origin of the transform as follows:
.bubble {
position: relative;
top: 4.8em;
width: 275px;
height: 40px;
padding: 5px;
background: #C00006;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 79px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
/* top: -79px; */
bottom: 100%; /* better than specifying the top */
right: 38px; /* equal to width of the arrow, for instance */
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transform-origin: 38px 100%;
-moz-transform-origin: 38px 100%;
-ms-transform-origin: 38px 100%;
-o-transform-origin: 38px 100%;
transform-origin: 38px 100%;
}
<div class="bubble"></div>
It's worth noting that CSS transforms are supported in IE 9 and newer.