내부에 텍스트가있는 도형의 내부 그림자를 만드는 방법은 무엇입니까?

Question

CSS로 만든 텍스트가있는 기하학적 도형에 내부 그림자를 만드는 방법이 있습니까? 내가 만들 필요가 무엇

:이 스레드의 코드를 사용

: 사업부와 삼각형으로 만들어진 모양 경우 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

, 나는 여러 배경과 그것을 얻기 위해 노력했다.

값을 변경하여 적절한 크기를 얻을 수 있습니다.

.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을합니다.