Shadow border at one edge of a CSS triangle

Question

I have this CSS triangle:

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; } 

Is it possible to add a shadow to one of the edges like this?

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

Answer 1

You can use a different approach so that the triangle can apply a shadow to it:

 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> 

Learn more about rotation triangles

Answer 2

This can be done by combining CSS transformation and box-shadow . However, I think that skewX notation conversion is more capable in this case.

An example here is (vendor prefix omitted due to brevity).

 .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

if you just want to get a shadow in the lower right corner

there is a solution

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