Border cień na jednej krawędzi trójkąta CSS

Question

mam to CSS trójkąt:

http://codepen.io/orweinberger/pen/myEoVa

KOD:

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
.triangle { 
    position:absolute; 
    bottom:0; 
    right:0; 
    display: inline-block; 
    vertical-align: middle; 
} 
.triangle-0 { 
    width: 200px; 
    height: 200px; 
    border-bottom: solid 100px rgb(85,85,85); 
    border-right: solid 100px rgb(85,85,85); 
    border-left: solid 100px transparent; 
    border-top: solid 100px transparent; 
} 

.text { 
    color:#fff; 
    position:absolute; 
    bottom:0; 
    right:0; 
} 

Czy jest możliwe aby dodać cień do jednej z krawędzi, podobnie do tego?

http://codepen.io/orweinberger/pen/ByzbKX

Answer 1

Można użyć innego podejścia do trójkąta, aby móc zastosować box-shadow do niego:

body { 
 
    overflow: hidden; 
 
} 
 
div { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 150px; 
 
    width: 213px; 
 
    background: lightgrey; 
 
    -webkit-transform-origin:100% 0; 
 
    -ms-transform-origin:100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    box-shadow: 0px -3px 5px 0px #656565; 
 
}

<div></div>

Więcej informacji tutaj na triangles with transform rotate

Answer 2

Można to zrobić, łącząc transformację CSS i box-shadow. Jednak myślę, że notacja przekształcenia skewX jest w tym przypadku bardziej wydajna.

Example Here - (przedrostki dostawcy pominięte z powodu zwięzłości).

.triangle { 
 
    position:absolute; 
 
    bottom:0; right:0; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 

 
.triangle::before { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgb(85,85,85); 
 
    box-shadow: 0 0 7px rgba(0,0,0,.8); 
 
    transform: skewX(-45deg); 
 
    transform-origin: 0 100%; 
 
} 
 

 
.text { 
 
    color:#fff; 
 
    position: absolute; 
 
    bottom: 0; right: 0; 
 
}

<div class="triangle"></div> 
 
<div class="text"> 
 
    Lorem ipsum... 
 
</div>

Answer 3

jeśli chcesz tylko swój cień w prawym dolnym rogu

nie mają rozwiązanie,

*{margin:0px; padding:0px;} 
 
.corner{ 
 
width:150px; 
 
height:150px; 
 
overflow: hidden; 
 
position: absolute; 
 
right:0px; bottom:0px; 
 
} 
 
.corner:before{ 
 
background:rgb(85,85,85); 
 
width:220px; 
 
height:220px; 
 
transform: rotate(45deg); 
 
margin: 48px; 
 
box-shadow: 0px 0px 10px #111; 
 
bottom: 0px; 
 
right: 0px; 
 
content:''; 
 
display: block; 
 
} 
 
.text{position: absolute; 
 
z-index: 2; 
 
right: 10px; 
 
bottom: 10px; 
 
color: #fff;}

<div class="corner"> 
 

 
<div class="text"> 
 
    Tesdt 
 
</div> 
 
</div>