我可以做一个钻石,我可以用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,1)),transparent),to(transparent));
}
解决方法
实际上,您只需使用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: ''
}
