css arrow box html,html - CSS arrow with border add box shadow - Stack Overflow

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);

}

This is a CSS3 triangle with a proper box-shadow!