I'm having a bit of a problem with backgrounds and box-shadows.
As you can see in the image, the triangle (made with CSS) has a border that reveals that hole, breaking the shadows of the box-shadow of both elements.
The code is the following:
/* Generated by less 2.5.1 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Demo of the tool-tip CSS */
.tooltip {
text-decoration: underline;
color: #37b9b5;
cursor: default;
}
.tooltip-bubble {
position: absolute;
z-index: 1;
padding: 5px 10px;
color: #fff;
width: auto;
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
background-color: transparent;
border-radius: 10px;
}
.tooltip-bubble div {
position: relative;
z-index: 1;
font-size: 12px;
}
.tooltip-bubble::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #706f6f;
border-radius: 10px;
}
.tooltip-bubble .arrow {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: translate(-50%, 0);
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
}
.tooltip-bubble .arrow.up {
top: -10px;
border-bottom: 10px solid #706f6f;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.tooltip-bubble .arrow.down {
border-top: 10px solid #706f6f;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
<div class="tooltip-bubble"><div>Tutorial de uso</div><div class="arrow down"></div></div>
I have tried with transparent backgrounds in the arrow class, but there is no way to achieve it.
If there is any way to fix that problem, I would love to know for future projects that may come up.
Creating triangles using the edges can lead to undesirable results like the ones you come across with the
box-shadow
. But to do what you want, you don't have to use borders to create those shapes. You could create a square as wide as you want, and then rotate it 45 degrees to make a "diamond."Positioning that diamond in such a way that it is below your text bubble and that only half is visible... you already have the triangle you were looking for! Then the idea would be:
transform: rotate(45deg)
calc
to position the element, the position will be calculated from the middle of the width/height you have given to the box.The good news is that since you're using the block itself and not transparent borders, the properties will still be there and work better than before (although there may still be some "collateral damage", some of which could be fixed by playing with the values of the box or shadow positions).
The code for the arrows would look like this:
And here is a demo: