CSS - 如何创建对角浮雕？

时间：2016-06-01 08:17:40

标签： html css css3 css-shapes linear-gradients

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

enter image description here

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

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

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<a class="button">Gallery</a>
＆＃13;
＆＃13;
＆＃13;

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

5 个答案:

答案 0 :(得分：4)

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

示例：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<a class="button">Gallery</a>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
.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;
  }
＆＃13; 
<a class="button">Gallery</a>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：4)

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

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

将伪元素（正方形或矩形）放置在父元素后面，通过使用成角度的线性梯度产生三角形切割。梯度具有135度和315度作为角度（其为45度线或换言之，正方形/矩形的对角线）。由于假想方块的大小为10px x 10px，因此对角线的长度为14px，因此通过将7px（半距离）和7px（另一半）的热插拔设置为透明，可以产生三角形切割。

以下是执行的步骤：

  • 创建一个比10px更高且比10px元素宽.button的伪元素，因为投影必须延伸到左侧和底部的元素之外。
  • 在伪元素的linear-gradient和top left上放置2个小bottom left背景条。水平条带的大小（左侧的大小）设置为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是一个演示，但可以看出它非常复杂，我建议使用伪元素方法本身。

答案 2 :(得分：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>

答案 3 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<a href="#" class="button">Gallery</a>
＆＃13;
＆＃13;
＆＃13;

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

答案 4 :(得分：0)

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

您可能还想尝试使用此工具： http://www.cssmatic.com/box-shadow

相关问题
最新问题