Question

我尝试在我的三角形上添加阴影，但它不会起作用，这太烦人了！继承我的代码：

＆＃13;

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();
});

＆＃13;

##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;
}

＆＃13;

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

＆＃13;

我一直在寻找解决方案很长时间而且找不到解决方案。运行该代码时会发生这种情况： 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

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

Answer 3

您可以复制元素，将其直接对齐默认三角形，并将css过滤器属性与绝对位置和背面元素大小结合使用。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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>

如何为此三角形添加阴影

4 个答案: