css - 在非正交三 Angular 形上设置阴影

在示例中可以看到，如果您熟悉阴影三角形技术，那么它仅适用于正三角形。

有人熟悉阴影的等腰线或一般三角形吗？

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

最佳答案

您可以使用第二个伪指令并将其模糊化：

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

关于css - 在非正交三 Angular 形上设置阴影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35784539/