0

I want to add box shadow for my triange but instead it makes square.I have tried search this problem, but couldn't find nothing

.speech-bubble {
      display:inline-block;
      padding:5px;
     position: relative;
     background: #dcf8c6;
     border-radius: .4em;
      box-shadow: 0px 1px 1px #d0cbc4;
    }
    
    .speech-bubble:after {
     content: '';
     position: absolute;
     right: 0;
     top: 50%;
     width: 0;
     height: 0;
     border: 5px solid transparent;
     border-left-color: #dcf8c6;
     border-right: 0;
     margin-top: -5px;
     margin-right: -5px;
      box-shadow: 0px 1px 1px #d0cbc4;
    }
<div class="speech-bubble"> Hello Mike! Could you please call me back </div>
Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67
  • See if this help https://stackoverflow.com/questions/39439656/how-to-apply-a-drop-shadow-on-a-triangle-in-css – Flavio Caruso May 09 '19 at 13:56
  • use drop shadow - see this: https://stackoverflow.com/questions/21133763/webkit-filter-drop-shadow-for-other-browsers – Pete May 09 '19 at 13:57

0 Answers0