带尖边和阴影的按钮

Question

我正在尝试制作一个 CSS 按钮。正如您在下面看到的，我无法为角落的第二个 HTML 元素创建渐变。通常我会使用边框或简单地旋转一个元素来创建一个带有渐变的三角形，但问题是我的三角形不是 90 度正方形。

所需设计：（灰度，视网膜 200% 缩放）

我的 CSS 按钮：（蓝色，视网膜 200% 缩放）

有没有更好的方法来使用 CSS 创建这个按钮？

http://jsfiddle.net/G8ZBz/ 或直接阅读以下内容：

HTML 代码

<div class="button">
    <div class="button-inside"></div>
</div>

CSS

.button {
    width: 225px;
    height: 60px;
    background: #2983d2;
}
.button:before {
    position: absolute;
    width: 0px;
    height: 0px;
    left: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 13px solid #2983d2;
}
.button:after {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 13px solid #2983d2;
}
.button .button-inside {
    position: relative;
    width: 221px;
    height: 55px;
    margin-left: 2px;
    background: #469bf9; /* Old browsers */
    background: -moz-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#469bf9), color-stop(50%,#1e80f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #469bf9 50%, #1e80f7 50%); /* IE10+ */
    background: linear-gradient(to bottom, #469bf9 50%, #1e80f7 50%); /* W3C */
}
.button .button-inside:before {
    position: absolute;
    width: 0px;
    height: 0px;
    left: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 13px solid #1e80f7; /* should be a gradient */
}
.button .button-inside:after {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right: -13px;
    content: "";
    display: block;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 13px solid #1e80f7; /* should be a gradient */
}

Answer 1

您可以使用skew property 制作平面三角形。

在你的情况下，我会使用 skew() 属性和背景阴影来制作底部边框效果：

DEMO

输出：

下图解释了每个元素、伪元素和背景阴影是什么以及如何使用来形成按钮。伪元素和背景阴影用于最小化标记：

HTML：

<div class="button top">
    <div class="button bottom"></div>
</div>

CSS：

.top{
    position:relative;
    margin-left:150px;
    width: 225px;
    height: 60px;
}
.button:before, .button:after{
    position: absolute;
    width:70%; height:50%;    
    content: "";  
    z-index:-1;
}
.top:before {
    left:0; top:0;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #469BF9;
    box-shadow: -5px 10px 0px -5px #104f96;
    z-index:-2;
}
.top:after {
    right:0; top:0;
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #469BF9;
    box-shadow: 5px 10px 0px -5px #104f96;
    z-index:-2;
}
.bottom:before{
    left:0; top:50%;
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #1E80F7;
    box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
    right:0; top:50%;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #1E80F7;
    box-shadow: 4px 5px 0px 0px #104f96;
}

你也可以用几个不同的三角形检查这个codepen。

Answer 2

您可以通过执行以下操作使用单个元素来实现此形状：

• 分配有perspective 的单个父元素。
• 两个伪元素，它们的高度都是单个父元素的一半，并且沿相反的方向旋转。父母的视角意味着他们会像梯形一样显示。
• 将两个伪元素准确地放置在另一个之下，使它们看起来像是两个相同形状的部分。
• 在伪元素上设置阴影以在底部产生阴影效果。

.hex-with-shadow {
  position: relative;
  width: 225px;
  height: 60px;
  margin: 0px auto;
  -webkit-perspective: 10px;
  -moz-perspective: 10px;
  perspective: 10px;
}
.hex-with-shadow:before {
  position: absolute;
  content: '';
  top: -1px;
  left: 0px;
  width: 100%;
  height: 50%;
  background: #469BF9;
  box-shadow: 0px 3.5px 0px 0px #104f96;
  -webkit-transform: rotateX(3deg);
  -moz-transform: rotateX(3deg);
  transform: rotateX(3deg);
}
.hex-with-shadow:after {
  position: absolute;
  content: '';
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background: #1E80F7;
  border-bottom: 1px solid #104f96;
  box-shadow: -4px 3px 0px #104f96, 4px 3px 0px #104f96;
  -webkit-transform: rotateX(-3deg);
  -moz-transform: rotateX(-3deg);
  transform: rotateX(-3deg);
}

<div class="hex-with-shadow"></div>

最终输出：

---

原答案：

你可以使用下面的方法来创建三角形，也可以给它一个渐变。

Demo

未来读者须知：第二种方法非常老套，不可重复使用。此外，这会在 Firefox 中造成轻微的失真。