Is it possible to apply an inner shadow to geometric shapes with text inside using CSS?
This is the effect I want to achieve:
https://i.stack.imgur.com/XcGS2.png
I followed the code provided in this thread: Required pentagon shape with right direction CSS and HTML
When trying to create a shape made of a div and a triangle, I can set an inner shadow for the div only. However, setting a shadow for the triangle as well results in a visible border between them.
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>Using SVG allows me to create an inner shadow using box-shadow, but the triangle part of the shape will not cast a shadow. Additionally, adjusting the proportions of the shape in this case is not very straightforward.
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>