html - CSS - 如何创建对 Angular 线浮雕？

Question

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

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

但它总是非常轻微地错位不到 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>

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

Answer 1

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

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

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

以下是执行的步骤:

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