鍍金池/ 問答/數(shù)據(jù)分析&挖掘  HTML/ 帶陰影的三角形如何繪制？

帶陰影的三角形如何繪制？

要實現(xiàn)的效果如下
clipboard.png

我只做到這種程度：

clipboard.png

回答
編輯回答
厭惡我

利用:before,:after偽類進行絕對定位，設(shè)置陰影，然后旋轉(zhuǎn)，就可以模擬三角斜邊陰影了。
可以看下這個例子：三角陰影
其實不難，想清楚就行
這邊我另附一下box-shadow的用法吧
box-shadow

2017年4月10日 04:51
編輯回答
掛念你

新的 CSS 有個 box-shadow （拼寫不一定對）的屬性。這個屬性值中，可以設(shè)置 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>

clipboard.png

2017年4月27日 11:25