How to add box shadow around the below shape [duplicate] - html

Question

This question already has answers here:
CSS box shadow around a custom shape?
(3 answers)
Closed 5 years ago.
Hi Guys i am trying to add a box shadow around the custom shape created using css
like the below image
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>

Answer 1

Declare values for the pseudo-element width & height
properties;
purge the borders;
then rotate the pseudo-element in question;
now apply box-shadow as required;
grab a nice cold one;
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 0px 5px 3px #000000;
}
div::after {
position: absolute;
z-index: 2;
content: "";
left: 100%;
width: 32px;
height: 32px;
background: #50b3cf;
transform: rotate(46deg);
transform-origin: 0 0;
box-shadow: 3px -3px 5px 0px #000000;
}
div::before { /* ver 2.0 Patch */
content: "";
position: absolute;
background: #50b3cf;
top: 0;
bottom: 0;
width: 25px;
right: 0;
z-index: 9;
}
<div></div>

Answer 2

.box{
border:1px solid white;
width:400px;
height:150px;
margin-left:40px;
box-shadow: 0 0 9px 3px rgba(0,0,0,0.5);
}
.arrow {
width: 100px;
height: 100px;
position: relative;
top:20px;
left:-100px;
overflow: hidden;
box-shadow: 0 10px 10px -17px rgba(0,0,0,0.5);
transform: rotate(270deg);
}
.arrow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
transform: rotate(45deg);
top: 76px;
left: 25px;
box-shadow: -2px -2px 9px 0px rgba(0,0,0,0.5);
}
<div class="box">
<div class="arrow"></div>
</div>
Try this code

Answer 3

Maybe this what you are looking to do.
The first one with box shadow, the second one doesn't has box shadow but you can add it using this code box-shadow: 0px 0px 6px 0px #000;in class "arrow-r"
<style type="text/css">
.main-box{
position: relative;
padding: 0 35px 90px;
}
.box{
font-size: 20px;
position: relative;
display: inline-block;
clear: both;
margin-bottom: 8px;
padding: 13px 14px;
vertical-align: top;
border-radius: 5px;
}
.arrow-l {
float: left;
color: #fff;
background-color: #08abf4; box-shadow: 0px 0px 6px 0px #000;
}
.arrow-r {
float: right;
color: #1a1a1a;
background-color: #e2e2e2;
}
.box:before{
position: absolute;
top: 24px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
left: -4px;
background-color: #08abf4;
}
.box:before{
position: absolute;
top: 21px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
right: -4px;
background-color: #e2e2e2;
}
</style>
<div class="main-box">
<div class="box arrow-l left">
I'm Liam Lababidi
</div>
<div class="box arrow-r right">
What about u?
</div>
</div>

Answer 4

You want to use box-shadow: 10px 10px 5px #888888; for this. Each px indicates what side and the # indicates the color.
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 10px 5px #888888;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>