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

Community · Accepted Answer · 2017-05-23 11:49:31Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Dec 21, 2014 at 12:50

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roko C. Buljan Over a year ago

and I think it's the only way +1

Weafs.py Over a year ago

Here is another way using :after :pseudo-element.

web-tiki Over a year ago

@chipChocolate.py it is basicaly the same way : you used rotation to be able to apply the shadow.

Hashem Qolami · Accepted Answer · 2014-12-21 12:58:12Z

1

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>

answered Dec 21, 2014 at 12:58

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Comments

Alien · Accepted Answer · 2014-12-21 13:11:30Z

1

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>

edited Dec 21, 2014 at 13:11

answered Dec 21, 2014 at 12:59

Alien

3,6761 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Border shadow on one edge of a CSS triangle

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related