gpt4 book ai didi

CSS:条纹钻石

转载 作者:技术小花猫 更新时间:2023-10-29 11:02:33 25 4
gpt4 key购买 nike

我可以做钻石,我可以用 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));
}

最佳答案

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

关于CSS:条纹钻石,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14225104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com