Как добавить тень к этому треугольнику

Question

Я попытался добавить тень к моему треугольнику, но это просто не работает, это так раздражает! Heres мой код:

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>

Я искал решение в течение длительного времени и не могу найти. Это то, что происходит, когда этот код 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 
} 

Рабочая Fiddle: https://jsfiddle.net/rittamdebnath/drefg8r4/

Answer 2

Вы можете попробовать использовать тень для создания треугольника вместо границы. Тогда на :before или :after элементов, которые вы можете установить перекрывающийся бокс-тень, пример Криса Coyier: http://codepen.io/chriscoyier/pen/bNZWzK

Answer 3

Вы можете cuplicate своего элемента, выровнять его непосредственно позади треугольника по умолчанию и использовать CSS фильтр СВОЙСТВА в сочетании с абсолютным позиционированием и размер обратного элемента.

.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

Вы можете передавать только по градиенту рисовать и размытие (тень) треугольник.

Если вы используете вертикальный край/отступы в процентах, он принимает ширину для справки, поэтому стрелка изменена по ширине, а не по высоте.

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>