Styles
.Tooltip {
position: absolute;
z-index:999;
width:200px;
height:57px;
padding:20px;
font-family: "Comic Sans MS", cursive;
font-weight:bold;
font-size:14px;
color:rgba(21,139,204,1);
text-align:justify;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
background:#dbf3ff;
}
.Tooltip .ArrowWrap {
position:absolute;
margin-top:77px;
margin-left:81px;
height:18px;
width:37px;
overflow:hidden;
}
.Tooltip .ArrowWrap .ArrowInner {
width:25px;
height:25px;
margin:-13px 0 0 6px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
background:#dbf3ff;
}
JSFiddle Demo
Explanation
I would like my Tool tip arrow to not be a blocked off triangle caused by the tool tip boarder instead alike my edited Photoshop version shown in the image to the right.
2
Answers
I think the best option here, is to use
svg
for the background.Other approach with box-shadows and a pseudo element :
On a side note: unless you have very specific needs for browser support, the use of vendor prefixes isn’t necessary for box-shadows and border-radius.