demo

Question

我可以做一个钻石，我可以用CSS做条纹。我有两个问题合并得到条纹钻石。请参阅my 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));
}

Answer 1

实际上你只需要1个元素而不是CSS：

demo

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

CSS：条纹钻石

3 个答案:

demo