Border shadow on 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, similar to this?

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

score 6 · Accepted Answer · edited May 23 '17 at 11:49

6

You can use another approach for the triangle to be able to apply a box-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>

More info here on triangles with transform rotate

edited May 23 '17 at 11:49

Community

1
1

answered Dec 21 '14 at 12:50

web-tiki

99,765
32
217
249

and I think it's the only way +1 – Roko C. Buljan Dec 21 '14 at 12:51
[Here](http://codepen.io/chipChocolate/pen/pvbYEb) is another way using `:after` :pseudo-element. – Weafs.py Dec 21 '14 at 12:53
@chipChocolate.py it is basicaly the same way : you used rotation to be able to apply the shadow. – web-tiki Dec 21 '14 at 12:58

score 1 · Answer 2 · answered Dec 21 '14 at 12:58

It can be done by combining CSS transform and box-shadow. However I think skewX transform notation is more capable in this case.

Example Here - (vendor prefixes 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>

Alien · Answer 3 · 2014-12-21T13:11:30.047

if you just want out your shadow in bottom right corner

there have 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>

Border shadow on one edge of a CSS triangle

3 Answers3