主页 / 问题 / 720293
Accepted
Иван Антонов
Asked:2020-09-19 17:40:17 +0000 UTC2020-09-19 17:40:17 +0000 UTC

如何在 CSS 中制作带阴影的三角形？

  • 772

问题在标题中。我试图:before在 svg 中的常规图片上和上施加阴影，阴影总是覆盖在矩形区域上。这不是放置已绘制阴影的图像的唯一方法吗？

body {
  position: relative;
  background: #ccc;
  margin: 40px;
}

.menu {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
              0 1px 18px 0 rgba(0, 0, 0, 0.12),
              0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

.menu:before {
  content: '';
  position: absolute;
  top: -40px;
  left: 30px;
  border: 20px solid transparent;
  border-bottom: 20px solid white;
}
<div class="menu"></div>

css

2 个回答

  1. Best Answer

    body {
  position: relative;
  background: #ccc;
  margin: 40px;
}

.menu {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
              0 1px 18px 0 rgba(0, 0, 0, 0.12),
              0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

.menu:after {
  content: '';
  position: absolute;
  top: -40px;
  left: 30px;
  background: white;
  border: 20px solid transparent;
  transform: rotate(45deg) translateX(15px) translateY(15px);
  box-shadow: 0 0 10px 0 #909090;
}
.menu .content{
  position: relative;
  z-index: 1;
  width:100%;
  height:100%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
}
    <div class="menu">
  <div class="content"></div>
</div>

    本质大致如下 - 本身有一个方块，一个正方形 - 它投下阴影。在它上面，after 元素也是一个正方形，但旋转了 45 度，偏移了，因此只有角是可见的（使用变换）并投射阴影。但是它会在积木本身上投下阴影，如果你在上面做一个积木，那么积木就会在角落上投下阴影。因此，在菜单块中，我们再制作一个块 - 正是所有内容所在的位置 - 我们为其指定位置，我们指定 z-index 以便它位于后元素的顶部，然后我们设置填充和其他一切。

    • 3

  2. 为此，您需要使用 CSS 形状。

    shape-outside: url(image.png) 指令告诉浏览器从图像中提取形状的轮廓。

    shape-image-threshold 属性设置像素参与形状形成的最低透明度。此属性的值范围可以从 0.0（完全透明）到 1.0（完全不透明）。

    链接到完整描述

    • 0

相关问题