css - CSS：条纹菱形

Question

我可以做钻石，我可以用 CSS 做条纹。我在将两者合并以获得条纹钻石时遇到问题。请看我的小提琴（适用于 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));
}

Answer 1

你实际上可以用 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: ''
}

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

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