CSS Only - ToolTip with Top Facing Arrow - css

I'm trying to create the following tooltip (not the contents within - just the box & arrow):
I'm having an issue getting the arrow to blend in correctly with the main box.
I created a Fiddle here with the code I have so far.
You will notice the arrow looks ok but just doesn't fit in 100%, I'm not sure how to finish it.
Below is the arrow code:
.arrow_box:after, .arrow_box:before {
border: 11px solid;
border-color: inherit;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom: 100%;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #f3f3f3;
border-width: 13px;
margin-left: -23px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #e1e1e1;
border-width: 15px;
margin-left: -25px;
}


http://jsfiddle.net/9uppsLqa/5/
.arrow_box {
border-radius: .1875em;
z-index: 99;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
margin-top: 3em;
margin-left: .75em;
margin-right: .75em;
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
width: 340px;
height: 160px;
}
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}

Related

Remove background color from arrow

i have this css code to add one arrow to my dropdown:
div {
&.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-bottom: 6px solid #cdd1da;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-color: transparent transparent #fff transparent;
border-width: 6px;
background: #cdd1da;
}
}
}
This is the result:
I would like to remove grey corner but keep grey border:
Thank you

I have created snippet according to requirement, Currently done with css, you can make scss or i will create a pen let me know. please check:
div.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
}
div:before {
content: '';
position: absolute;
bottom: 100%;
left: 26%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #cdd1da transparent;
border-width: 7px;
}
div:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 5px;
}
<div class="toggle-assessment-key-dropdown">
Item
</div>

How to add 2 bordered triangle over a div tag

I have a div tag and I added one triangle on the div box. How do I add a second triangle?
I want to have 2 triangles, one for best and one for worst that will work on most browsers.
JSFiddle
.arrow_box {
top: 40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 19px;
left: 70%;
margin-left: -19px;
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 70%;
margin-left: -20px;
}
<div id="nicebox" class="arrow_box">
<span class="pull-left">Best </span>
<span class="pull-right">Worst</span>
</div>

Here is the updated Demo
.arrow_box {
top:40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #719ECE;
border-width: 19px;
right: 0%;
/* margin-left: -10px; */
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 10%;
margin-left: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<div id="nicebox" class="arrow_box">
<span class="pull-left"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>Best </span>
<span class="pull-right">Worst</span>
</div>

How do I create this arrow using pure CSS

How do I create the following arrow using pure CSS ?
So Far, I have this:
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft">Left</div>
</div>

Here's a Working Fiddle
Or a bigger One
<div class="HalfCircleLeft"></div>
.HalfCircleLeft
{
margin: 100px;
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
background-color: #cfa040;
position: relative;
}
.HalfCircleLeft:before
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
top: 40px;
left: 10px;
}
.HalfCircleLeft:after
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cfa040;
top: 40px;
left: 13px;
}

Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}
.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>

Inside arrow on the right with outline border and boxshadow

I'm trying to add some css3 styles on an element, basing on an image model.
After many search, I've been able to have a some results, but not all I need.
You can see on the following image : http://soultherapy.free.fr/img/css3_need_screen.png
=> on the top : the effects I'm trying to reproduce in css3
=> on the bottom : the effects I was able to realize with css3 only : very very far from perfection ^^
As you can see, there are problems with border and shading of the right arrow...
Here is the html code :
<div class="span6">
the text<b></b>
</div>
And the css code :
.arrow-box, .arrow-box:hover {
position: relative;
display: inline-block;
font-weight: bold;
padding: 6px 12px 6px 30px;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);
outline: 1px solid #5e98ba;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #c4c7c9;
border-left: 0;
}
.arrow-box:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.arrow-box:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba ;
}
.arrow-box b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba ;
}
Do you think what I'm trying to do is possible only with css3 ?
If it's the case, could you help me to find the correct css3 code.
Fiddle: http://jsfiddle.net/2cDnV/1/

I know my solution does not look exactly like your image but might help you to get started.
You can play around the code a bit to get what you want and to bring elegance to it.
You can find the jsFiddle here.
HTML:
<div class="marginer">
<div class="box">
<div class="boxIn">This is text</div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
</div>
CSS:
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5);
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
box-shadow: 1px 4px 3px rgba(0, 0, 0, .5);
}
I've played a bit with shadows and tranforms to achieve the result.
Let me know if it helped you.

Here is the final code to obtain exactly the same result as in the original image : http://jsfiddle.net/developpeuse_web/TSFMT/1/
HTML :
<div class="box">
<div class="left-shadow"></div>
<div class="boxIn"></div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
CSS :
.left-shadow {
position: absolute;
height: 100%;
width: 23px;
left: 0px;
top: 0px;
background-image: -webkit-gradient(linear, left top, right top, from(#333333), to(transparent));
background-image: -webkit-linear-gradient(left, #333333, transparent);
background-image: -moz-linear-gradient(left, #333333, transparent);
background-image: -o-linear-gradient(left, #333333, transparent);
background-image: linear-gradient(left, #333333, transparent);
opacity: 0.44;
filter : alpha(opacity=44);
}
.boxIn {
float: left;
border: 1px solid #fff;
width: 100px;
height: 20px;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
}
Thanks Harshad !

Thanks...of course it helped me a lot !
If it's not perfect, well it's very close :)
In complement, I've just found another way to generate shadow, by using "-webkit-filter: drop-shadow". So I've add this attribute to .box element, and remove the grey box-shadow on all other elements (.box, .boxArrowUpIn:after, .boxArrowDownIn:after ) : http://jsfiddle.net/developpeuse_web/TSFMT/
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
/* -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5); */
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
/* box-shadow: 3px 2px 4px rgba(0, 0, 0, .5); */
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
/* box-shadow: 1px 4px 3px rgba(0, 0, 0, .5); */
}
Don't know if it's a better solution for browsers compatibility, but looks a little bit cleaner.
I think the last detail I have to do is to add an inner shadow on the left border, and it will be exactly what I need. I'll post the final code here.
Thanks very much !

Is it too late to enter the contest ?
The HTML
<div id="mysolution">MY SOLUTION<div id="arrow"></div></div>
The CSS
#mysolution {
color: red;
padding: 10px 9px 10px 25px;
position: relative;
display: block;
z-index: 1;
width: 170px;
height: 30px;
overflow: hidden;
}
#mysolution:after, #mysolution:before {
content: " ";
display: block;
left: -20px;
position: absolute;
width: 80%;
}
#mysolution:before {
z-index: -2;
height: 30%;
top: 11%;
-webkit-transform: skewX(-35deg);
background-image: linear-gradient(55deg, black, rgb(94, 152, 186) 30%);
border-right: 1px solid white;
border-top: 1px solid white;
box-shadow: 1.52px -1px 0px #5e98ba, 4px 4px 5px rgb(110, 110, 110);
}
#mysolution:after {
z-index: -1;
height: 28%;
bottom: 28.95%;
-webkit-transform: skewX(35deg);
background-image: linear-gradient(125deg, black, rgb(94, 152, 186) 30%);
padding-right: .8px;
border-right: 1px solid white;
border-bottom: 1px solid white;
box-shadow: 1.52px 1px 0px #5e98ba, 1.52px 0.5px 0px #5e98ba,-2px 4px 5px rgb(110, 110, 110);
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
left: 0px;
top: 37px;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
z-index: -3;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
fiddle
Just trying to do it with less divs and less CSS. (And picking ideas from the work already done... :-)

overflow-y eating CSS properties

I created a div tag with long text, so i decided to use overflow-y:auto; but applying this eats away my css properties like upper triangle, and glow effect in MY BROWSER.
view fiddle, http://jsfiddle.net/SFVC3/
.message_box {
position: absolute;
top:80px;
right:5px;
width: 350px;
height: auto;
padding: 10px;
background:#fff;
visibility: hidden;
max-height:400px;
overflow-y:auto;
border:solid 1px #719ECE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
z-index:9999;
}
.message_box:after, .message_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.message_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 9px;
right: 10%;
margin-right: -9px;
}
.message_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 10px;
right: 10%;
margin-right: -10px;
}

Resources