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，可能使用的代码少于三角形。

示例：

 .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

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

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

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

以下是执行的步骤：

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

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

注意：在没有伪元素的情况下也可以采用相同的方法，但理解它会变得复杂得多，因此我将其遗漏了。 这是一个演示，但可以看出它非常复杂，我建议使用伪元素方法本身。

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