在非正交三角形上设置阴影

Question

正如您在示例中所见，如果您熟悉阴影三角形技术，它仅适用于正交三角形。

有谁熟悉阴影等腰线或任何三角形？

即使可以接受 svg，也不必采用相同的方法。 没有光栅。

感谢您的帮助。

.ortho{
  top: 400px;
  left:-300px;
  transform: rotate(135deg)
}

.isosceles{
  top: 40px;
  left:40px;
}


.triangle{
  position: relative;
}

.triangle:after{
  
  width: 0;
  height: 0;
  
  position: absolute;
  content: "\0020";
  border: 40px solid;
  transform-origin: 0 0;
  box-sizing: border-box;
  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.3);
  border-color: transparent transparent #bada55 #bada55;
  
}


.isosceles:after{
  
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 40px 68px 40px;
	border-color: transparent transparent #dadada transparent;
}

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

Answer 1

你可以使用第二个伪并模糊它：

/* added */

.triangle:before {
  content: '';
  -webkit-filter: blur(2px);
  filter: blur(2px);
  width: 0;
  height: 0;
  left: -2px;
  top: -4px;
  position: absolute;
  content: "\0020";
  border: 43px solid;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-color: transparent transparent #000 #000;
}
.isosceles:before {
  content: '';
  position: absolute;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  left: -1px;
  top: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 41px 70px 41px;
  border-color: transparent transparent #000 transparent;
}
/* end added */

.ortho {
  top: 400px;
  left: -300px;
  transform: rotate(135deg)
}
.isosceles {
  top: 40px;
  left: 40px;
}
.triangle {
  position: relative;
}
.triangle:after {
  width: 0;
  height: 0;
  position: absolute;
  content: "\0020";
  border: 40px solid;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-color: transparent transparent #bada55 #bada55;
}
.isosceles:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 68px 40px;
  border-color: transparent transparent #dadada transparent;
}

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

Answer 2

我使用 html5 做了类似的事情

window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var c = canvas.getContext("2d");
  var width = 300; // Triangle Width
  var ht = 360; // Triangle ht
  var pd = 95;
  c.beginPath();
  c.moveTo(pd + width / 2, pd);
  c.lineTo(pd + width, ht + pd);
  c.lineTo(pd, ht + pd);
  c.closePath();
  c.shadowBlur = 100;
  c.shadowColor = "lime";
  c.fillStyle = "#444488";
  c.fill();
  c.beginPath();
  c.moveTo(pd + width / 2, ht + pd);
  c.lineTo(pd + width, pd);
  c.lineTo(pd, pd);
  c.closePath();
  c.shadowBlur = 100;
  c.shadowColor = "yellow";
  c.fillStyle = "#222244";
  c.fill();
};

#myCanvas {
  border: 22px solid fuchsia;
}

<canvas align-="center" border="yellow" id="myCanvas" width="500" height="500">Browser not suitable for HTML5.</canvas>

见：isoceles triangle with glow