我怎样才能给这个三角形添加一个阴影

Question

我曾尝试给我的三角形添加阴影，但它不会工作，这太恼人了！ 继承人我的代码：

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>

我一直在寻找了很长时间的解决方案，并不能找到一个。这是当该代码是跑会发生什么： 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 
} 

工作小提琴：https://jsfiddle.net/rittamdebnath/drefg8r4/

Answer 2

您可以尝试使用箱形阴影来构建三角形而不是边框​​。然后在:before或:after元素可以由克里斯·Coyier设置重叠的box-shadow，例如： http://codepen.io/chriscoyier/pen/bNZWzK

Answer 3

您可以cuplicate你的元素，直接对准其背后的默认三角形，并与绝对位置结合使用CSS滤镜propertie和后面的元素大小。

.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>