CSS - 如何创建对角线浮雕？

Question

我想要一个如下图所示的 3d 对角浮雕按钮：

我的第一个想法是使用阴影，然后使用::before和::after添加两个小三角形来缩小差距。

但它总是略微错位小于 1 个像素（参见下面的 sn-p）。我使用了不同的颜色以便于编码。

.button {
  border: 1px solid red;
  box-shadow: -10px 10px red;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
}

/* create triangle */

.button::before { content: ""; position: absolute;
  top: -1px;
  left: -11px;
  width: 0; height: 0; font-size: 0; line-height: 0%; border-style: solid; border-color: transparent; border-width: 0 0 11px 11px; border-bottom-color: red; }

.button::after { content: ""; position: absolute;
  right: -1px;
  bottom: -11px;
  width: 0; height: 0; font-size: 0; line-height: 0%; border-style: solid; border-color: transparent; border-width: 11px 11px 0 0; border-top-color: red; }

<a class="button">Gallery</a>

有没有比使用三角形和绝对定位更好的实现方式？

Answer 1

一种解决方案是使用两个有角度的linear-gradient 条带 - 一个在左侧，另一个在按钮元素的底部。

想象在伪元素的左上角和右下角放置 10px x 10px 的正方形，使其填充在对角线的一侧是透明的，而在另一侧是彩色的。它会产生一个三角形。这正是我们在这里使用的方法。

一个伪元素（正方形或矩形）被放置在父元素的后面，三角形切割是通过使用有角度的线性渐变产生的。渐变的角度为 135 度和 315 度（即 45 度线或换句话说正方形/矩形的对角线）。由于假想正方形的大小为 10px x 10px，对角线的长度为 14px，因此通过将颜色设置为 7px（一半距离）的透明和 7px（另一半）的 hotpink，就会产生三角形切割。

以下是执行的步骤：

• 创建一个比父元素.button 更高10px 更高10px 的伪元素，因为投影必须延伸到左侧和底部的元素之外。
• 在伪元素的top left 和bottom left 上放置2 个小的linear-gradient 背景条。水平条（左侧）的大小设置为10px 100%。这是因为左边浮雕的厚度（也就是条的宽度）是10px。
• 类似地，垂直条的大小（底部的那个）设置为100% 10px。再次因为底部的厚度（在这种情况下，厚度是浮雕的高度）是 10 像素。
• 然后我们生成了两个角度为135deg 和315deg 的线性渐变，以便在右下角和左上角看到三角形切口。梯度内的像素颜色停止点是根据毕达哥拉斯定理计算的。该值为 10px/sqrt(2)。
• 元素的 1 像素边框是使用 box-shadow: inset 0px 0px 0px 1px hotpink 实现的，因为插入阴影不会像额外边框那样影响伪元素的定位属性。

.button {
  display: inline-block;
  margin: 30px;
  position: relative;
  outline: none;
  font-size: 40px;
  padding: 10px 30px;
  background-color: #333;
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0px 0px 0px 1px hotpink; /* mimics the border */
}
.button:after {
  position: absolute;
  content: '';
  top: 0px;
  right: 0px; 
  height: calc(100% + 10px); /* since projection should extend outside bottom edge */
  width: calc(100% + 10px); /* since the projection should extend outside the left edge */
  background: linear-gradient(135deg, transparent 7px, hotpink 7px), linear-gradient(315deg, transparent 7px, hotpink 7px);
  background-size: 10px 100%, 100% 10px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}

<a class="button">Gallery</a>

<a class="button">Gallery Button Big</a>

注意：同样的方法也可以在没有伪元素的情况下使用，但是理解起来会变得更加复杂，因此我把它省略了。 Here 是一个演示，但可以看出它非常复杂，我建议使用伪元素方法本身。

Answer 2

您只能使用 box-shadow，代码可能比三角形少。

例子：

.button {
  border: 1px solid pink;
  box-shadow: -10px 10px pink,-9px 9px pink,-8px 8px pink,-7px 7px pink,-6px 6px pink,-5px 5px pink,-4px 4px pink,-3px 3px pink,-2px 2px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
}

<a class="button">Gallery</a>

为避免像素，您可以在每个声明中添加 1px。

.button{
 border: 1px solid pink;
 box-shadow: -10px 10px 1px pink,-9px 9px 1px pink,-8px 8px 1px pink,-7px 7px 1px pink,-6px 6px 1px pink,-5px 5px 1px pink,-4px 4px 1px pink,-3px 3px 1px pink,-2px 2px 1px pink,-1px 1px 1px pink,0px 0px 1px pink;
  
  display: inline-block; margin: 30px; position: relative; outline: none; font-size: 40px;
  padding: 10px 30px; background-color: #333; font-weight: 700;
  color: white; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; text-align: center;
  }

<a class="button">Gallery</a>

Answer 3

使用这个

<style>
  .test {
    display: inline-block;
    padding: 20px;
    margin: 20px;
    background: #000;
    color: white;
    font-weight: bold;
    text-decoration: none;
  }

  .test.shape {
    position: relative;
    box-shadow: -1px 1px #FC2CFF, -2px 2px #FC2CFF, -3px 3px #FC2CFF, -4px 4px #FC2CFF, -5px 5px #FC2CFF;
    transition: all 0.1s ease-in;
  }

</style>

<body>
  <div class="test shape">Box text</div>
</body>

Answer 4

您只能使用box-shadow 来执行此操作（不需要:after 或:before！请参阅以下解决方案：

.button {
  padding:10px;
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
  display:inline-block;
  text-decoration:none;
  background: #333;
  border: solid 1px pink;
  box-shadow: -1px 0px 0px pink,-0px 1px 0px pink,
    -2px 1px 0px pink,-1px 2px 0px pink,
    -3px 2px 0px pink,-2px 3px 0px pink,
    -4px 3px 0px pink,-3px 4px 0px pink,
    -5px 4px 0px pink,-4px 5px 0px pink,
    -6px 5px 0px pink,-5px 6px 0px pink,
    -7px 6px 0px pink,-6px 7px 0px pink,
    -8px 7px 0px pink,-7px 8px 0px pink,
    -9px 8px 0px pink,-8px 9px 0px pink;
}

<a href="#" class="button">Gallery</a>

提示：有一个包含许多不同按钮样式的小库：https://webdesignerhut.com/3d-buttons-with-css-dropshadow/。因此，您不必为自己的按钮设置样式。

Answer 5

我认为最适合您的解决方案是使用box-shadow。

您可能还想试试这个工具： http://www.cssmatic.com/box-shadow