I have a tooltip with arrow and arrow border, but I need the arrow to get also the box shadow of the tooltip how I can do this?
I need a cross-browser solution. I can't use CSS filter.
.tooltip {
position: absolute;
}
.arrow_box {
position: relative;
background-color: #fff;
border: 1px solid lightgrey;
border-radius: 2px;
padding: 12px;
box-shadow: 1px 1.5px 4px 0px rgba(170, 174, 181, 0.45);
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.arrow_box:before {
border-color: rgba(211, 211, 211, 0);
border-right-color: #d3d3d3;
border-width: 7px;
margin-top: -7px;
}
<div class="tooltip">
<div class="arrow_box">
<p>tooltip</p>
</div>
</div>
The solution of your problem can be solved, like the one posted here: https://codepen.io/ryanmcnz/pen/JDLhu
Basically:
1. Create a square (::after), rotate it and add box shadow.
2. Create a second square (::before) that overlaps the box shadow casted inside the balloon.
body {
background-color: #fff;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #fff;
border: 1px solid #fafafa;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after{
z-index: -10;
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 0;
bottom: 0;
top: calc(50% - 5px);
left:0;
box-sizing: border-box;
border: 5px solid #fff;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::before{
z-index: 10;
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 0;
bottom: 0;
top: calc(50% - 5px);
left:0;
box-sizing: border-box;
border: 5px solid black;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
I stumbled upon this the other day and thought I will leave this here. My solution is a single element, only using one of the pseudo :before
element and utilizing clip-path
.
:root {
--shadowSize: 20px;
--shadowColor: #f00;
}
.box {
position: relative;
width: 300px;
padding: 20px;
box-shadow: 0 0 var(--shadowSize) var(--shadowColor);
background-color: #fff;
border-radius: 4px;
}
.box:before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 30px;
height: 30px;
background-color: #fff;
box-shadow: 0 0 var(--shadowSize) var(--shadowColor);
transform: translate(50%, -50%) rotate(45deg);
clip-path: polygon(
calc(var(--shadowSize) * -1) calc(var(--shadowSize) * -1),
calc(100% + var(--shadowSize)) calc(var(--shadowSize) * -1),
calc(100% + var(--shadowSize)) calc(100% + var(--shadowSize))
);
}
<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia excepturi et unde soluta accusamus dolorum. Architecto, a laborum. Unde impedit aliquam voluptatibus sed dignissimos mollitia nihil consectetur dolores accusamus recusandae?</div>
The clip-path
or rotation of the :before
-element has to be adjusted if you want to place the arrow on a different side of the box. The CSS also has to be adjusted if you want to use box-shadow
offset, it's currently only calculating the actual size of it.
Example using SCSS: https://codepen.io/MyXoToD/pen/gOMvYOx
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With