Box shadow for css generated arrow

Question

I'm using the following code for creating up arrow in css:

border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent

I also want to apply a box-shadow only to the arrow not the rectangular box around it (FIDDLE). Is it possible this way?

NOTE:- I don't want to use any image, it should be with CSS.

Answer 1

Sadly, using the border hack doesn't work when using box-shadow.

CSS

Instead, you will want to use css transform to rotate an element and hide the overflow. You will need to use a pseudo-element.

.triangle {
  width: 100px;
  height: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #999;
  transform: rotate(45deg);
  top: 25px;
  left: 25px;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

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

Canvas

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(25, 10);
context.lineTo(40, 40);
context.lineTo(10, 40);
context.lineTo(25, 10);

context.closePath();
context.shadowColor = "rgba(0, 0, 0, 0.4)";
context.shadowBlur = 7;
context.shadowOffsetX = 2;
context.shadowOffsetY = 5;
context.fillStyle = "rgba(132, 28, 255, 0.8)";
context.fill();

<canvas id="triangle" height="50" width="50">Triangle</canvas>

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width="50" height="50" viewBox="0 0 100 100">
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
    <!-- stdDeviation is how much to blur -->
    <feOffset dx="0" dy="0" result="offsetblur" />
    <!-- how much to offset -->
    <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <polygon points="50,10 90,90 10,90" style="filter:url(#dropshadow)" />
</svg>