Box shadow to triangle created using css

Question

I have the following plunker where I have created a triangle using CSS.

CSS:

.triangle {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
}

HTML:

<div class="triangle">
</div>

In my AngularJS project, this triangle is created when I call a dropdown directive as defined here.

The problem is that I want to give this triangle and the dropdown popup a box shadow. I am able to apply it on the popup (which is essentially just a 'ul' list) but I am struggling with the triangle. How can I apply box shadow to the triangle?

Possible duplicate of [-webkit-filter: drop-shadow for other browsers](http://stackoverflow.com/questions/21133763/webkit-filter-drop-shadow-for-other-browsers) — Pete, Oct 19 '15 at 08:21

Enkode · Accepted Answer · 2015-10-19T08:26:27.490

.triangle {
  position: relative;
  margin: 0;
  box-sizing: border-box;
  background: red;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: transparent transparent red red;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="triangle">
      
    </div>
  </body>

</html>

Here is the HTML and CSS to create the desired effect.

Nice work, using rotation to hack your way through the limitations of current CSS. Kuddos! — klaar, Oct 19 '15 at 08:23

score -1 · Answer 2 · answered Oct 19 '15 at 08:21

Since the triangle is actually a hack (three of the four borders of the block element are transparent), the box-shadow property will not work as expected, because it still sees the element to which you apply this 'hack' as rectangular, so the box-shadow is applied accordingly.

The result is in this fiddle.

.triangle:before {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
    box-shadow: 0px 0px 2px 2px #AAA;
}

    <div class="triangle">
      
    </div>

Box shadow to triangle created using css

2 Answers2