Wie erstellt man inneren Schatten für geometrische Formen mit Text im Inneren?

Question

Gibt es eine Möglichkeit, einen inneren Schatten für geometrische Formen mit Text innerhalb von CSS zu erstellen?

Das ist, was ich schaffen müssen:

ich den Code aus diesem Thread verwendet: Required pentagon shape with right direction CSS and HTML

Wenn die Form eines div und ein Dreieck gemacht - ich für die inneren Schatten einstellen nur div. Aber selbst wenn ich Schatten für das Dreieck setzen könnte, wird eine Grenze zwischen ihnen sichtbar.

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>

Wenn ich einen SWG verwenden, kann ich einen inneren Schatten schaffen mit box-shadow, aber das Dreieck Teil des Formulars wird nicht Schatten werfen. Und auch in diesem Fall ist es nicht sehr praktisch, die Proportionen dieser Form zu ändern.

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>

Answer 1

Da box-shadow nur entweder auf einer Seite oder alle von ihnen angewandt werden kann, habe ich versucht, es mit mehreren Hintergründen zu bekommen.

Sie können die Werte ändern, um die passende Größe für Sie zu erhalten.

.pentagon { 
 
    background: linear-gradient(to right,black -3px, transparent 7px), 
 
    linear-gradient(black -3px, transparent 7px), 
 
    linear-gradient(to top , black -3px, transparent 7px), 
 
    #4275FF; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    /* box-shadow: inset 0 0 10px #000000; */ 
 
    z-index: 10; /* put it higher in the stacking order */ 
 
    
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
} 
 

 
.pentagon::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 140px; 
 
    height: 20px; 
 
    top: 47px; 
 
    right: -112px; 
 
    background: linear-gradient(black -4px, transparent 7px); 
 
    transform: rotate(45deg); 
 
    z-index: 2; 
 
} 
 

 
.pentagon::after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 47px; 
 
    width: 140px; 
 
    height: 20px; 
 
    right: -112px; 
 
    background: linear-gradient(black -4px, transparent 7px); 
 
    transform: rotate(135deg); 
 
    z-index: 2; 
 
} 
 

 
.pentagon-pointer { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -98px; 
 
    border-left: 98px solid #4275FF; 
 
    border-bottom: 100px solid transparent; 
 
    border-top: 100px solid transparent; 
 
    z-index: 1; 
 
}

<div class="pentagon"> 
 
<div class="content"> 
 
    PUT YOUR CONTENT HERE 
 
</div> 
 
<div class="pentagon-pointer"></div> 
 
</div>

Hier ist ein JSfiddle auch zu versuchen.