CSS：条纹菱形

Question

我可以使用CSS来制作钻石和条纹，但是我在将两者合并以制作条纹钻石时遇到了问题。请查看我的fiddle （仅适用于Chrome），您如何制作条纹钻石呢？

#diamond {
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-bottom: 40px solid red;
  position: relative;
  top: -80px
}
#diamond:after {
  content:'';
  position: absolute;
  left: -80px;
  top: 40px;
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-top: 40px solid red;
}

.stripes {
  height: 80px;
  width: 160px;
  background-size: 4px;
  background-color: red;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
}

- Randomblue

---

在边框渐变受支持之前，这种特定技术将无法使用。 - Diodeus - James MacFarlane

当你删除了最后一个问题时，我正在回答它。这需要一些改进，但已经是一个开始：http://jsbin.com/alinup/2/edit。 - Tom Smilack

@TomSmilack：你的空心菱形真棒！ - Randomblue

Answer 1

你实际上只需要一个元素和较少的CSS就可以完成它：

演示

HTML 只需使用 <div class='diamond'></div>。

相关的 CSS：

.diamond {
    overflow: hidden;
    position: relative;
    padding: 20%;
    width: 0;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.diamond:before {
    position: absolute;
    top: 0%; right:  -37.5%; bottom:  0; left:  -37.5%;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: linear-gradient(90deg, crimson 50%, transparent 50%);
    background-size: 6px;
    content: ''
}

- Ana

---

你是如何把所有的数字都搞对的？是通过试错法，还是计算得出的？ - Randomblue

好的。您能详细说明一下 1.155 吗？这是如何计算出来的？ - Randomblue

1/.866 和 .866 分别是 sqrt(3)/2，也就是 sin(60deg)，这是在应用 skewX(30deg) 后得到的平行四边形的锐角。 - Ana

我应用 scaleY 的原因是，将元素倾斜后，其顶部和底部的长度保持不变，它们之间的距离也保持不变（因为我们从一个正方形开始），但是侧面的长度增加了，现在侧面是直角三角形中的斜边，该三角形具有一个 60deg 的角度，并且与该角度相对应，有一条等于初始正方形边长的边。因此，我需要将斜边缩小到该值，即一个这样的斜边的 .866。 - Ana

Answer 2

使用您提供的代码创建CSS条纹菱形：http://jsfiddle.net/r3PNs/5/ HTML:

<div id="diamond"></div>
<div class="stripes" style=""></div>

CSS（层叠样式表）：

#diamond {
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-bottom: 40px solid red;
  position: relative;
  top: -80px;
}
#diamond:after {
  content:'';
  position: absolute;
  left: -80px;
  top: 40px;
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-top: 40px solid red;
}

.stripes {
  height: 80px;
  width: 160px;
  background-size: 4px;
  background-color: transparent;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
  position:absolute;
  top:0;
}

- Omega

Answer 3

您正在使用边框来创建菱形，使用背景来创建条纹。这两者无法同时使用。您可以将条纹框旋转以获得菱形效果：

.stripes {
    height: 80px;
    width: 80px;
    background-size: 4px;
    background-color: red;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

- dfmiller