如何用內部文字爲幾何形狀創建內部陰影？

Question

有沒有辦法用CSS創建內部文本的幾何形狀的內部陰影？

這就是我需要創建：

我使用這個線程的代碼：Required pentagon shape with right direction CSS and HTML

如果做一個div和三角形的形狀 - 我可以來設置內陰影只有div。但即使我也可以爲三角形設置陰影，它們之間的邊界將變得可見。

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>

如果我使用的SWG，我可以創建使用箱陰影的內陰影，但形式的三角形部分將不會投射陰影。而且在這種情況下，改變這種形狀的比例不是很方便。

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

由於箱陰影只能任一方或全部應用，我試圖用多背景得到它。

您可以更改這些值以獲得適合您的尺寸。

.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>

這裏有一個JSfiddle嘗試爲好。