我有一个使用类diamond
的条纹黑色菱形(请参见小提琴here):
.diamond {
border: 8px solid black;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 12%;
width: 0;
-webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
position: absolute;
top: 0;
right: -37.5%;
bottom: 0;
left: -37.5%;
background: -webkit-linear-gradient(black 50%, transparent 50%);
-webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
background-size: 10px;
content: '';
}
现在我想要一个类
red
,它将使菱形变为红色,包括边框和条纹。我设法施加了红色边框,但没有施加红色条纹。如何修改.red
的CSS,以使条纹变为红色? 最佳答案
.diamond {
border: 8px solid black;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 12%;
width: 0;
-webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
position: absolute;
top: 0;
right: -37.5%;
bottom: 0;
left: -37.5%;
background: -webkit-linear-gradient(black 50%, transparent 50%);
-webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
background-size: 10px;
content: '';
}
.red {
border-color: crimson !important;
}
.red:before {
background-image: -webkit-linear-gradient(red 50%, transparent 50%);
}
小提琴http://jsfiddle.net/UQQMz/1/
关于css - 改变条纹的颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14528343/