Working on a chat bubble:
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
<div class="bubble"></div>
The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):
.bubble:hover, .bubble:hover:before, .bubble:hover:after{
background-color: red;
}
I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?
You just have to add
.bubble:hover:after {
border-color: red transparent;
}
because the small triangle is actually the border of the :after element.
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border: rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover:after {
border-color: red transparent;
}
<div class="bubble"></div>
Maybe simply this:
.bubble:hover::after {
border-color: red transparent;
}
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover::after {
border-color: red transparent;
}
<div class="bubble"></div>
Related
In this code, I am trying to get a shape as my expectation. But I am failing to do it? Can you please tell me where I am wrong. Why my code is not working as Expected. As per knowledge all classes working properly except marker nose. Why my marker nose style is not working properly? Can you please guide me.
Expectation:
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
margin-top: -3px;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-color: #fff transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
.hoarding_marker_nose:after{
margin-top: -4px;
border-color: #697379 transparent transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Change the border shorthand property to to border-style: solid on the before element and increase the z-index so it's visible on top of the bubble.
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
margin-top: -4px;
content: "";
height: 0;
width: 0;
position: absolute;
border-style:solid;
border-color: #697379 transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
z-index: 1;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Please use below code:
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border: 1px solid #fff;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
position: relative;
display:inline-block;
}
.hoarding_marker_content:after {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
border-top: 8px solid #697379;
position: absolute;
bottom: -7px;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="hoarding_marker_content">₹2,193</div>
Try this code this one is like as you expected.
.hoarding_marker{
cursor: pointer;
transform: translateX(50%);
-webkit-transform: translateX(50%);
}
.hoarding_marker_content{
font-size: 12px;
background-color: #697379;
border-top: 3px solid #dccfcf;
border-right: 3px solid #dccfcf;
border-bottom: 8px solid #dccfcf;
border-left: 3px solid #dccfcf;
border-radius: 2px;
font-weight: 700;
padding: 4px;
color: #fff;
min-width: 25px;
text-align: center;
white-space: nowrap;
}
.hoarding_marker_nose{
height: 6px;
width: 12px;
border-radius: 100%;
margin: 3px auto 0;
}
.hoarding_marker_nose:before{
margin-top: -11px;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #697379;
border-color: #697379 transparent transparent;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
z-index: 1;
}
.hoarding_marker_nose:after{
margin-top: -4px;
border-color: #697379 transparent transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border: 6px solid #fff;
border-width: 6px 6px 0;
margin-left: -6px;
left: 50%;
}
<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
<div class="hoarding_marker_content">₹2,193</div>
<div class="hoarding_marker_nose"></div>
</div>
Below is code for downward arrow. I am trying to make it to upward but no success till now.
Can anyone help me with this?
.line {
width: 70%;
}
.line:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
.line:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
I just wanted to show the upward arrow between the hr tag.
https://www.w3schools.com/code/tryit.asp?filename=FG5LJQ77HPXS
There it is, you should just play a little bit with border-width and then correct the topand left position
Arrow Up
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: white transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<div class="up"></div>
Arrow Left
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 7px 0px;
border-color: transparent white;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 7px 0px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 44.8%;
}
<div class="up"></div>
Arrow Right
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 0px 7px 7px;
border-color: transparent white;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 0px 7px 7px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45.1%;
}
<div class="up"></div>
Arrow Down
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0px 7px;
border-color: white transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 4px;
left: 45%;
}
<div class="up"></div>
Working solution
.line {
width: 70%;
}
.line:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.line:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
To have the up arrow use this code
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 1px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
tried with your code, and finally i did it..try my code..!
<!DOCTYPE html>
<html>
<head>
<style>
.line {
width:70%;
}
.line::before {
border-color: #7f7f7f transparent;
border-style: solid;
border-width: 0 7px 7px;
content: "";
display: block;
left: 45%;
position: absolute;
top: 2px;
width: 0;
z-index: 1;
}
.line::after {
border-color: #ffffff transparent;
border-style: solid;
border-width: 0 7px 7px;
content: "";
display: block;
left: 45%;
position: absolute;
top: 3px;
width: 0;
z-index: 1;
}
</style>
</head>
<body>
<hr class="line">
</body>
</html>
Do you mean it like that?
.line {
position: relative;
width: 70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -6px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: -7px;
left: 45%;
}
First we make an upward arrow by changing the :after and :before 's border-width from 0 7px 7px to 7px 7px 0. Then we updated the top position so it will fit in the hr element :)
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<hr class="line">
How do I create a non-rectangular border like in this image?
Current Code: http://jsfiddle.net/bqjr5wep/
div {
background:#1c1c1c;
width:400px;
height:200px;
position:relative;
}
div:before, div:after {
content:'';
display:block;
left:10px;
right:10px;
top:10px;
bottom:10px;
border:2px solid #FFF;
position:absolute;
}
div:after {
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Sample 1: Transparent background for shape with non-solid page background
Here is an approach which supports non-solid background for the page (gradient or image), transparent background for the shape and also is scalable. The downside probably is the fact that it requires more than one element.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 2: Solid color (non-transparent) background for shape
If the shape needs to have a different background compared to the page background and the shape's background is a solid color then the same approach with a small modification can be used. Sample is provided below:
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 3: Gradient/Image background for shape
You can also add an image (or) gradient different from the page background to the shape's background and it would look like in the below snippet. It cannot follow the outer border of the shape exactly.
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
background: url(http://lorempixel.com/600/600);
}
.shape:after {
position: absolute;
content: '';
top: -4px;
left: 10px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 2px 2px 0px 0px;
}
.shape:before {
position: absolute;
content: '';
top: 10px;
left: -4px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before {
position: absolute;
content: '';
height: 12px;
width: 12px;
top: -6px;
left: -6px;
border: 2px solid white;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
bottom: -6px;
right: -6px;
border: 2px solid white;
border-width: 2px 0px 0px 2px;
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 4: Semi-transparent background for shape
This is the trickiest of the lot but can still be achieved by doing some minor modifications to the snippet. The idea for this was picked from this thread.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: rgba(80, 80, 80, 0.75);
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0.75;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
background: linear-gradient(180deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(270deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
background: linear-gradient(0deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(90deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/400/200/sports/Dummy-Text/);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
I just created a simple SVG image and used the CSS border-image to create the desired effect.
http://jsfiddle.net/bqjr5wep/1/
div {
width:80%;
height: 200px;
position: relative;
margin:50px auto;
background-color: #1c1c1c;
}
div:before, div:after {
content:'';
display: block;
position: absolute;
left: 10px;
top:10px;
right: 10px;
bottom: 10px;
}
div:before {
border-style: solid;
border-width: 16px;
-moz-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-webkit-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-o-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
border-image: url('http://imgh.us/border_1.svg') 16 repeat;
}
div:after {
border:2px solid #FFF;
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Try This
CSS:
.wrap{
width: 400px;
height: auto;
position: relative;
background: #000;
overflow: hidden;
padding: 20px;
}
.border-1{
width: 400px;
height: 200px;
position: relative;
border: 1px solid #fff;
}
.border-2{
width: 391px;
height: auto;
position: absolute;
border: 1px solid #fff;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
margin: auto;
z-index: 3;
}
.top-1{
position: absolute;
top: -2px;
left: -2px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.bottom-1{
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
Hope it helps :) Happy Coding.
I have this code snippet:
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
}
.multiply-button-arrow {
display: table-cell;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
<div class="multiply-button-arrow"></div>
</button>
I need to make border on this "arrowed" button. I can easily border rectangle part (I've already did it), but how to make this border on triangle part?
The following should do what you need
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 0 9px;
border: solid 1px black;
border-right: none !important;
position: relative;
vertical-align:middle;
height: 40px; /* double the border width */
box-sizing: border-box;
}
.multiply-button-content:after,
.multiply-button-content:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 20px 0 20px 12px;
margin-top: -20px;
}
.multiply-button-content:after {
border-color: rgba(0, 128, 0, 0);
border-left-color: #008000;
margin-left: -1px;
}
.multiply-button-content:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: #000000;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
This is a useful tool
div{
position: relative;
background-color: #008000;
padding: 0px 16px;
height: 40px;
line-height: 40px;
display: inline-block;
color: white;
border: 2px solid black;
border-right: none;
z-index:1;
}
div:before{
content: '';
position: absolute;
left: 100%;
z-index:-1;
width: 28px;
height: 28px;
background-color: #008000;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg) translate(-14px,-7px);
}
<div>Multiply</div>
Or much simplier :
the CSS with only one pseudo element
.multiply-button {
background: rgba(0, 0, 0, 0);
border: none;
width: 100px;
color: #FFF;
padding: 0;
overflow: hidden;
}
.multiply-button-content {
display: block;
position: relative;
background: #008000;
width: 60px;
padding: 10px 9px;
border: solid 1px #000;
border-right: none !important;
}
.multiply-button-content:before {
content: "";
position: absolute;
width: 36px;
height: 31px;
z-index: -1;
top: 0;
right: -13px;
border: 1px solid #000;
background: #008000;
transform: rotate(45deg);
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
Since it only takes one pseudo element to make the 'point', you could use the other to make a border behind it (making it slightly bigger in size).
For example;
div {
height: 30px;
border: 2px solid black;
display: inline-block;
border-right: 2px solid transparent;
line-height: 30px;
text-align: center;
position: relative;
background: tomato;
color: white;
}
div:before {
content: "";
position: absolute;
border: 17px solid transparent;
border-left: 17px solid black;
right: -35px;
top: -2px;
z-index: 6;
}
div:after {
content: "";
position: absolute;
border: 15px solid transparent;
border-left: 15px solid tomato;
right: -31px;
top: 0;
z-index: 8;
}
<div>Arrow, Please!</div>
You can achieve that with :before or :after pseudo selectors. Study and adjust the example below.
.multiply-button {
display: inline;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
position: realtive;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
width: 100px;
position: relative;
}
.multiply-button-arrow {
width: 0;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent black;
position: absolute;
top: -2px;
right:-12px;
}
.multiply-button-arrow:before {
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
position: absolute;
right: 1px;
top: -20px;
content: "";
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">
<div class="multiply-button-arrow"></div>
Multiply</div>
</button>
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.