带阴影的三角形如何绘制？

要实现的效果如下

我只做到这种程度：

css

阅读 7.1k

3 个回答

LishiJ

利用:before,:after伪类进行绝对定位，设置阴影，然后旋转，就可以模拟三角斜边阴影了。
可以看下这个例子：三角阴影
其实不难，想清楚就行
这边我另附一下box-shadow的用法吧
box-shadow

yszou

4.9k2718

发布于
2017-12-08

更新于
2017-12-08

新的 CSS 有个 box-shadow （拼写不一定对）的属性。这个属性值中，可以设置 x 偏移和 y 偏移。x+5 y+5 差不多就是你要的效果吧。

没注意还要画三角形，好麻烦，直接 SVG 吧：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>多边形</title>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="8" stdDeviation="4" />
    </filter>
  </defs>
  <polygon points="10,10 200,10 100,260 10,10" fill="yellow" filter="url(#shadow)"></polygon>
  </svg>
</body>
</html>