It is possible to achieve this ribbon using only CSS?
.box {
width: 300px;
height: 300px;
background-color: #a0a0a0;
position: relative;
}
.ribbon {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 25px solid transparent;
border-top: 25px solid #757575;
position: absolute;
bottom: 20px;
right: -50px;
padding: 0 10px;
width: 120px;
color: white;
font-family: sans-serif;
size: 11px;
}
.ribbon .txt {
position: absolute;
top: -20px;
left: 20px;
}
<div class="box">
<div class="ribbon">
<div class="txt">
Example Text
</div>
</div>
<div>
Related
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
This question already has answers here:
CSS3 Transform Skew One Side
(5 answers)
Closed 2 years ago.
I'm tying to get a result as this image :
I tried that :
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
background: #008dd0;
width: 200px;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform-origin: 50% 50%;
padding: 0px;
margin: 0 1px;
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
transform-origin: 50% 50%;
padding: 0px;
margin: 0px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
I cannot achieve this like the image : first parallelogram not skrewed on his left side and last parallelogram not skrewed on his right side.
Can someone help me please ?
See Snippet
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
position: relative;
background: #008dd0;
width: 100px;
border: none;
display: inline-block;
height: 90px;
padding: 0px;
margin: 0 1px;
}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) {
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
margin-left: 1px;
}
.parallelogram:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #008dd0;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram-btn:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -51px;
z-index: -1;
background: #ffa008;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
position: relative;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0px;
margin-left: 51px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
You can also achieve this simply with the following code. In this case only one div is needed.
From this point you can of course fine tune everything but this is just to give you a rough idea.
HTML
<div class="box"></div>
CSS
.box{
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
.box {
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
<div class="box"></div>
Is there an easier or better way to create this particular shape/combination of shapes in CSS3 than what am I currently doing? I have tried a few different things already.
The downward facing triangle should be sitting just below the three lines, but I can't seem to get it there.
I want it to look like this:
https://jsfiddle.net/s6bcjzjr/
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
.triangle {
position: relative;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
I switch the triangle container's border to top and adjusted the margins
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}
.triangle {
position: relative;
margin: auto;
top: -10.5px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin: 3px 0 0 0;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
Using SVG:
You can create this easily using SVG. There is nothing complex and all that you would need is three line elements and one path element.
All three line elements have two co-ordinates where (x1,y1) represent the starting point of the line and (x2,y2) represent the ending point of the line.
The path element takes a path (d) and it value can be interpreted as follows:
M5,20 - Move to the point which is 5px to the right of the container and 20px down.
L95,20 - Draw a line from the previous point (5,20) to (95,20).
L50,45 - Draw a line from the previous point (95,20) to (50,45).
z - Close the path. That is, draw a line connecting the point (50,45) and the starting point.
svg {
height: 100px;
width: 50px;
}
line,
path {
stroke: #e74c3c;
stroke-width: 2;
}
path {
fill: none;
stroke-linejoin: bevel;
}
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<g id='graphic'>
<line x1='5' y1='5' x2='95' y2='5' />
<line x1='5' y1='10' x2='95' y2='10' />
<line x1='5' y1='15' x2='95' y2='15' />
<path d='M5,20 L95,20 L50,45z' />
</g>
</svg>
Using CSS with single element:
You can achieve the same shape using a single element also with CSS. Below is a sample snippet for the same. Below is an explanation of how the shape is achieved.
The parent anchor tag which has the height and width of the container.
The :before pseudo-element which is positioned absolutely with respect to the container and is 20px tall. The background of this element is a linear-gradient which has the required color for 2px and is transparent for the remaining part. Gradients by default repeat to fill its container and so this single background pattern produces the three lines.
The :after element is again positioned absolutely with respect to the container. This pseudo-element is then rotated such that its left and bottom borders produce angled parts of the triangle. Another linear-gradient background produces the top line of the triangle.
I have calculated height and width of the :after pseudo using Pythagoras theorem. If container is not a square then you have to manually calculate the values.
a {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
}
a:before {
position: absolute;
content: '';
top: 3px;
left: 0px;
height: 20px;
width: 100%;
background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px);
background-size: 100% 5px;
}
a:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
height: calc(50px / 1.414);
width: calc(50px / 1.414);
border-bottom: 2px solid #e74c3c;
border-left: 2px solid #e74c3c;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%);
}
<a href='#'></a>
.triangle-container {
top: -35px;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
https://jsfiddle.net/s6bcjzjr/6/
i've updated your fiddle and now your shape looks perfect. What I did is changed the border-bottom to border-top of the triangle-container, and adjusted height and margin to align the triangle perfectly
here is the fiddle - https://jsfiddle.net/s6bcjzjr/5/
The answer is:
.triangle-container {
top: -36px;
}
See it here:
.triangle-container {
top: -36px;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
.triangle {
position: relative;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
A one element method using before and after (fiddle):
.down-arrow {
display: inline-block;
position: relative;
width: 30px;
height: 14px;
border-top: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.down-arrow::before {
display: block;
position: absolute;
top: 3px;
right: 0;
left: 0;
height: 3px;
border-top: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
content: '';
}
.down-arrow::after {
display: block;
position: relative;
top: 4px;
left: 0;
right: 0;
width: 21px;
height: 21px;
margin: 0 auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
content: '';
}
.triangle-container {
top: 0px;
width: 30px;
height: 1px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}
.triangle {
position: absolute;
margin: auto;
top: -12px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
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.
You can use the CSS3 skew() method on your :after psuedo selector like this:
.bubble:after {
-ms-transform: skew(-40deg, 0deg);
-webkit-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
}
Here's a jsFiddle Demo.
.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 27px 79px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -19px;
top: -79px;
left: 69%;
-ms-transform: skew(-40deg, 0deg);
-webkit-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
}
<br/>
<br/>
<br/>
<br/>
<div class="bubble"></div>
try this http://jsfiddle.net/harshdand/gczu8w4e/
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 120px;
border-color: #C00006 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -49px;
top: -79px;
left: 95%;
-ms-transform: (50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
transform: rotate(50deg);
edit
usw skew instead of rotate . see the snippet with minimal CSS
transform: skew(-45deg);
.bubble {
position: relative;
bottom: -70px;
width: 275px;
height: 40px;
padding: 5px;
background: #C00006;
border-radius: 14px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 19px 79px;
border-color: #C00006 transparent;
width: 1px;
z-index: 1;
bottom: 95%;
left: 79%;
transform: skew(-45deg);
}
<div class="bubble"></div>