Border Schatten auf einer Kante eines CSS Dreieck

Question

ich dieses CSS Dreieck haben:

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

Code:

*, 
*: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; 
} 

Ist es möglich, einen Schatten auf eine der Kanten, ähnlich zu hinzufügen dazu?

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

Answer 1

Sie einen anderen Ansatz für das Dreieck ein box-shadow, um es anwenden zu können verwenden können: hier

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>

Weitere Informationen über triangles with transform rotate

Answer 2

Es kann durch die Kombination von CSS-Transformation undgetan werden. Aber ich denke, skewX Transformation Notation ist in diesem Fall mehr in der Lage.

Example Here - (Verkäuferpräfixe werden aus Platzgründen weggelassen).

.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

, wenn Sie Ihre Schatten nur rechte Ecke in der unteren

dort haben wollen, sich als eine Lösung,

*{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>