How can I add a shadow to this triangle - html

Question

I have tried adding a shadow to my triangle but it just wont work, this is so annoying!
Heres my code:
function section_about() {
$(".about").css("display", "inline-block");
$(".about").animate({opacity:"1"}, {duration: 1000, queue: false});
window.location.hash = "/About Us/";
}
function triangle_sizer() {
$(".triangle-up").css("border-left-width", jQuery(window).width()/2);
$(".triangle-up").css("border-right-width", jQuery(window).width()/2);
$(".triangle-up").css("top", jQuery(window).height()-125);
$(".triangle-down").css("border-left-width", jQuery(window).width()/2);
$(".triangle-down").css("border-right-width", jQuery(window).width()/2);
$(".triangle-down").css("top", jQuery(window).height()-125);
}
triangle_sizer();
jQuery(window).resize(function() {
triangle_sizer();
});
##style.css##
.triangle-down {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 200px 0 100px;
border-color: rgba(39, 39, 39, 1) transparent transparent transparent;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
background: rgba(39, 39, 39, 1);
-webkit-transform: rotate(45deg);
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
.par {
position: absolute;
top: 200%;
width: 100%;
height: 0%;
}
/* Arrows */
.arrows {
width: 220px;
height: 144px;
position: absolute;
left: 50%;
top: 70%;
margin-left: -76.5px;
}
.arrows path {
stroke: white;
fill: transparent;
stroke-width: 1px;
}
/* Arrows */
.arrows-down {
width: 220px;
height: 144px;
position: absolute;
left: 50%;
top: 70%;
margin-left: -78.5px;
}
.arrows-down path {
stroke: white;
fill: transparent;
stroke-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="par">
<div class="triangle-down">
<svg class="arrows-down" viewbox="0 0 102 102">
<path class="a1" d="M0 20 L30 52 L60 20"></path>
</svg>
</div>
</div>
I have been searching for a solution for a long time and cant find one. This is what happens when that code is ran:
https://gyazo.com/c890a79c547f5624c97abacc66104fc1
https://jsfiddle.net/Lec8862y/2/

Answer 1

HTML
<span class="triangle">▼</span>
CSS
span {
display: inline-block;
transform: scaleX(8.5);
color: lightgreen;
text-shadow:
0 2px 2px rgba(255,255,255,0.7),
0 10px 4px rgba(0,0,0,0.5);
font-size: 92px;
}
span:hover {
transition: all 0.2s ease;
transform: scaleX(9.5) translateY(4px);
text-shadow:
0 1px 1px rgba(0,0,0,0.5);
}
body {
padding: 20px;
margin-left: 260px;
margin-top: -40px
}
Working Fiddle: https://jsfiddle.net/rittamdebnath/drefg8r4/

Answer 2

You can try using box-shadow to build a triangle instead of border. Then on :before or :after elements you can set an overlapping box-shadow, example by Chris Coyier:
http://codepen.io/chriscoyier/pen/bNZWzK

Answer 3

You can cuplicate your element, align it directly behind the default triangle and use the css filter propertie in conjunction with absolute position and the back element size.
.triangle-down {
position: relative;
width: 220px;
height: 220px;
box-sizing: border-box;
}
.arrows-down {
display: block;
height: auto;
max-width: 200px;
box-sizing: border-box;
}
.arrows-down-back {
position: absolute;
left: 0;
top: 0;
max-width: 200px;
filter: blur(20px) opacity(.3);
-webkit-filter: blur(20px) opacity(.3);
}
<div class="par">
<div class="triangle-down">
<svg class="arrows-down img-responsive" viewbox="0 0 102 102">
<path class="a1" d="M0 20 L30 52 L60 20"></path>
</svg>
<svg class="arrows-down img-responsive arrows-down-back" viewbox="0 0 102 102">
<path class="a1" d="M0 20 L30 52 L60 20"></path>
</svg>
</div>
</div>

Answer 4

You could relay only on a gradient to draw and blur(shadow) the triangle.
If you use vertical margin/padding in percentage, it takes the width for reference, so arrow is resized from width, not height of content.
div {
position:relative;
color:white;
background:#333;
text-align:center;
margin:1em;
margin-bottom:5.5%;
box-shadow: 0 0 5px #333;
}
div:after {
content:'';
display:block;
position:absolute;
top:100%;
left:0;
right:0;
padding-top:5%;
background:linear-gradient(to bottom left, #333 49%, transparent 51%) no-repeat 0 0, linear-gradient(to bottom right, #333 49%, transparent 51%) no-repeat top right;
background-size:50% 99%
}
html {/* demo purpose to show arrow box is translucide */
background:linear-gradient(45deg, yellow,gray,purple,white,lime, yellow,gray,purple,white,lime);
min-height:100%;
}
<div>responsive box arrow, resize me or add content </div>
<div>i can be replicated <hr/> maybe you should use a <code>class</code> there </div>