带三角形的 3D 按钮答案

【问题标题】：3D button with triangle带三角形的 3D 按钮
【发布时间】：2018-03-28 21:37:14
【问题描述】：

我尝试创建一个带有三角形边缘的 3d-ish 按钮。

很遗憾，我在处理三角形部分时遇到了问题。底层与顶层不匹配。我正在为三角形使用边框技术。底层应该离顶层4px。

JSFiddle 也在底部。

<a class="btn" href="#"><span>Button text here</span></a>

scss:

.btn {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #EAC118;
    padding: 0 30px;
    line-height: 55px;

    span {
        display: block;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            right: -16px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 27px 0 28px 16px;
            border-color: transparent transparent transparent #EAC118;
        }
    }

    &::before {
        content: '';
        position: absolute;
        left: 4px;
        bottom: -4px;
        right: -6px;
        height: 100%;
        z-index: -1;
        background: #ff0000;
    }    

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: -22px;
        width: 0;
        height: 0;
        z-index: -1;
        border-style: solid;
        border-width: 24px 0px 28px 16px;
        border-color: transparent transparent transparent #ff0000;
    }
}

https://jsfiddle.net/th2hqmLz/6/

【问题讨论】：

标签： css css-transforms

【解决方案1】：

这是怎么回事 - 我刚刚让 span 继承了相同的样式并将它的底部和右侧偏移了 -5px，然后制作了另一个箭头与外部箭头对齐：

.btn,
.shadow {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  background: #EAC118;
  padding: 0 30px;
  text-decoration: none;
  line-height: 56px;
  text-transform: uppercase;
  font-family: Arial;
  color: #ffffff;
}

.btn::after,
.shadow:after,
.shadow:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 0;
  height: 0;
  z-index: 1;
  border-style: solid;
  border-width: 28px 0px 28px 15px;
  border-color: transparent transparent transparent #EAC118;
}

.shadow {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
  background: #ff0000;
}

.shadow::after {
  border-color: white white white #ff0000;
  left: calc(100% - 3px);
  z-index: 1;
}

.shadow::before {
  border-color: transparent transparent transparent #ff0000;
  bottom: 5px;
  z-index: 2;
}

.shadow > span {
  display: block;
  width: 5px;
  height: 5px;
  border-top: 5px solid #ffffff;
  background: #ff0000;
  position: absolute;
  top: -5px;
  right: -3px;
  z-index: 3;
}

<a class="btn" href="#">
  Button text here
  <span class="shadow"><span></span></span>
</a>

使用背景图片的示例：

body {
  background-size: cover;
  margin: 0;
  min-height: 100vh;
  background: url(http://www.eelt.org.uk/img/eso1716a.jpg) left top no-repeat;
}

.btn {
  margin:100px;;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  background: #EAC118;
  padding: 0 30px;
  text-decoration: none;
  line-height: 56px;
  text-transform: uppercase;
  font-family: Arial;
  color: #ffffff;
}

.btn::before {
  content: '';
  display: block;
  position: absolute;
  height: 0px;
  left: 5px;
  right: 0;
  bottom: -5px;
  border-bottom: 5px solid #A5CAE5;
}

.btn::after {
  content: '';
  position: absolute;
  bottom: -5px;
  top: 0;
  left: 100%;
  width: 15px;
  background: transparent url(https://i.stack.imgur.com/IFGSV.png) top left no-repeat;
  background-size: 100% 100%;
}

<a class="btn" href="#">
  Button text here
</a>

【讨论】：

都是很好的解决方案，我觉得我实现了相同或相似，但问题是三角形的点不是彼此相邻的。见附件设计。但也许这根本不可能。
在你的设计中，你的箭头点对齐，所以它不是一个合适的阴影。如果你想要这样，那么你必须为背景图像创建一个不同形状的三角形
@levipadre 查看编辑，有点老套，但似乎达到了你想要的效果
不错的@Pete。谢谢！
另外，不幸的是，如果背景是图像，它也不起作用。我刚注意到。

【解决方案2】：

filter: drop-shadow 可能很快会简化这项工作

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  background: #EAC118;
  padding: 0 30px;
  text-decoration: none;
  line-height: 55px;
  text-transform: uppercase;
  font-family: Arial;
  color: #ffffff;
  filter: drop-shadow(6px 4px 0px #ff0000);
}
.btn span {
    display: block;
}
.btn span::after {
    content: '';
    position: absolute;
    top: 0;
    right: -16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 27px 0 28px 16px;
    border-color: transparent transparent transparent #EAC118;
}

&lt;a class="btn" href="#"&gt;&lt;span&gt;Button text here&lt;/span&gt;&lt;/a&gt;

从现在开始注意

Chrome 和 Safari（基于 WebKit 的浏览器）不支持此参数；如果使用，效果将不会呈现。

【讨论】：

【解决方案3】：

这是一个线性梯度的想法：

:root {
  --c: yellow;
  --triangle: 
  linear-gradient(var(--c), var(--c))0 0/calc(100% - 30px) 100% no-repeat, 
  linear-gradient(to bottom left, transparent 50%, var(--c) 0) 100% 0/30px 50% no-repeat, 
  linear-gradient(to top left, transparent 50%, var(--c) 0) 100% 100%/30px 50% no-repeat
}

.box {
  width: 200px;
  height: 40px;
  margin: 20px;
  padding: 10px;
  background: var(--triangle);
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  width: 100%;
  height: 100%;
  background: var(--triangle);
  filter: hue-rotate(100deg);
  z-index: -1;
}

<div class="box">
  This is a 3D button
</div>

【讨论】：