我需要仅使用 css 和一个高度和宽度为 300px 的 div 创建上述视觉效果。我尝试了渐变但无法得到任何相同的东西。有人可以帮忙吗？
渐变是一个好主意，您甚至可以添加内容，无论渐变的大小如何，只要将其大小设置为正方形即可：
div {
background-color: red;
border-radius: 0 0 50% 50%;
background-image:
linear-gradient(-45deg, transparent 75%, blue 75%),
linear-gradient(45deg, transparent 75%, yellow 75%),
linear-gradient(to top, green 50%, transparent 50%);
height: 300px;
width: 300px;
transition:0.5s;
}
div:hover {
height: 150px;
width: 150px;
}
/* fun */
div {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 2.5em;
color: white;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
box-shadow: 0 0 5px gray, inset 0 0 0 3px white,inset 0 0 5px black;
}
<div>Hover me</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
