CSS

Question

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

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

但它总是有不到 1 个像素的非常轻微的错位（请参见下面的代码片段）。为了更容易编码，我使用了不同的颜色。

.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

你只能使用box-shadow，代码可能比triangle少。

示例：

.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 2

使用这个

<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 3

您只能使用 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 4

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

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

Answer 5

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

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

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

以下是执行的步骤：

创建一个比父 .button 元素高 10px 宽 10px 的伪元素，因为投影必须延伸到元素的左侧和底部。
在伪元素的 top left 和 bottom left 上放置 2 个小 linear-gradient 背景条。水平条（左边那个）的大小设置为10px 100%。这是因为左边的浮雕厚度（就是条带的宽度）是10px.
同样，垂直条（底部的）的大小设置为100% 10px。再次因为底部的厚度（在这种情况下，厚度是浮雕的高度）是10px。
然后我们生成了两个角度为 135deg 和 315deg 的线性渐变，以便在右下角和左上角看到三角形切口。梯度内的像素颜色停止点是根据毕达哥拉斯定理计算的。该值为 10px/sqrt(2).
元素的 1px 边框是使用 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 是一个演示，但可以看出它非常复杂，我建议使用伪元素方法本身。

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

CSS - How to create diagonal emboss?

html

css-shapes

linear-gradients