渐变是个好主意,无论渐变的大小如何,您甚至都可以添加内容,只要将其大小设置为正方形即可:
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句