给边框右边一个盒子阴影

Question

我试图给出一个三角形的边框,我用css做了一个盒子阴影.

#triangle-topleft {
	  width: 0;
	  height: 0;
	  border-top: 300px solid blue;
	  border-right: 100px solid transparent;
  }

<div id="triangle-topleft" />

我试过但不能给右边框一个阴影.有一个简单的CSS方法来实现这一目标吗？这就是它最终应该是什么样子(对于实际阴影来说更好).

Answer 1

您可以使用filtercss规则.

#triangle-topleft {
      width: 0;
      height: 0;
      border-top: 300px solid blue;
      border-right: 100px solid transparent;
      filter: drop-shadow(3px 3px 3px hsla(0, 0%, 0%, 1));
  }

<div id="triangle-topleft" />