CODEWITHSUNDEEP
htmlcssbordershadowbox-shadow
Tomasz Hajduk
Tomasz Hajduk

Reputation: 21

Adding box-shadow to a not-rectangle shaped div (playing with border-radius)

Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

Upvotes: 1

Views: 778

Answers (1)

izorgor
izorgor

Reputation: 138

yes you can. Here is the example:

.circle { 
width:150px;
height:150px; 
border: solid 1px #555;
background-color: #eed; 
box-shadow: 10px -10px rgba(0,0,0,0.6); 
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
-o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
border-radius:100px; 
}
<div class="circle">

</div>

Upvotes: 1

Related Questions