带三角形的 3D 按钮

Question

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

不幸的是，我在处理三角形部分时遇到了问题。底层与顶层不匹配。我正在为三角形使用边框技术。底层应距离顶层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/

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

Answer 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;
}

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

请注意，从现在开始

Chrome and Safari (WebKit-based browsers) do not support this parameter; the effect will not render if used.

Answer 3

这是 linear-gradient 的想法：

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

带三角形的 3D 按钮

3D button with triangle

css

css-transforms