内部にテキストを含む幾何学的図形の内側の影を作成するには？

Question

CSSで作成したテキストを含む幾何学的図形の内側の影を作成する方法はありますか？私が作成する必要があるものだ

：私はこのスレッドからコードを使用

：DIVと三角形で作られた形状た場合Required pentagon shape with right direction CSS and HTML

- 私はできるがために、内側の影を設定します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

箱-shadowが片側のみまたはそれらのすべてのいずれかに適用することができますので、私は複数の背景でそれを取得しようとしました。

値を変更して、適切なサイズにすることができます。

.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も同様にしようとするのです。