1

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;
}
Tomasz Hajduk
  • 21
  • 4
  • Are you trying to make a border effect or an actual shadow? – Paulie_D Sep 15 '16 at 13:57
  • Related - http://stackoverflow.com/questions/16237181/how-to-add-bordered-triangle-over-a-div-tag – Paulie_D Sep 15 '16 at 14:03
  • I'm trying to make actual shadow effect around the whole div. When I add the box-shadow effect now it makes shadow in a shape of rectangle in the place where there is a triangle made of borders. – Tomasz Hajduk Sep 15 '16 at 14:48
  • Yes, that would happen. See the linked question. Other than that it's a matter extra pseudo-elements to make the "border/shadow" around the triangle. An image of the desired result would be ideal if you can provide one. – Paulie_D Sep 15 '16 at 14:54
  • Or check this out - http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow – Paulie_D Sep 15 '16 at 14:58
  • @Paulie_D Thank you for your comment. The image is here: http://prntscr.com/cicbvr In the meanwhile I'll check the provided link. Thanks! EDIT: I've added the :after with the same attributes but it's still not working. – Tomasz Hajduk Sep 15 '16 at 15:08

1 Answers1

1

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>
izorgor
  • 138
  • 8