Is there a way to set an inner shadow for a geometric shape with text inside?

This is what I need to achieve:

enter image description here

I used the code from here: https://stackoverflow.com/questions/27730055/required-pentagon-shape-with-right-direction-css-and-html

If the figure consists of diva and triangle (option below), I can set the shadow only for diva. But even if I could give a shadow to the triangle, the border between the figures would be visible.

div { position: relative; width: 125px; height: 150px; background: #4275FF; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } div:after { content: ''; position: absolute; width: 0; height: 0; border-top: 75px solid transparent; border-bottom: 75px solid transparent; border-left: 25px solid #4275FF; right: -25px; } 
 <div></div>

If I use the swg method, I can create an internal shadow using box-shadow, but the triangular part of the figure will not cast a shadow again. (And besides, changing the proportions of the figure is inconvenient in this case).

 div { width: 150px; height: 150px; background: #4275FF; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } 
 <svg width="150" height="150"> <defs> <clipPath id="shape"> <path d="M0,0 h125 l25,75 l-25,75 h-125z" /> </clipPath> </defs> <foreignObject clip-path="url(#shape)" width="100%" height="100%"> <div></div> </foreignObject> </svg>

    2 answers 2

    Try this: box-shadow: inset 0 0 10px #ddd;

      Like so

       * { margin: 0; padding: 0; } div.bullet { width: 130px; min-height: 50px; background: #fff; padding-left: 15px; line-height: 23px; box-shadow: 5px 0px 40px #000 inset; -webkit-clip-path: polygon(0 0, 28% 0, 60% 0%, 100% 50%, 60% 100%, 36% 100%, 0 100%); clip-path: polygon(0 0, 28% 0, 60% 0%, 100% 50%, 60% 100%, 36% 100%, 0 100%); transition: all .5s; } div.bullet:hover { box-shadow: 5px 0px 40px blue inset; } span { display: block; } 
       <div class="bullet"> <div class="date"> <span>23 12 2010</span> <span>freeday</span> </div> </div>