如何实现这个使用CSS

Question

我需要只使用CSS，并具有300像素的高度和宽度只有一个div来创建上述视觉视觉。我尝试渐变，但没有得到任何相同的东西。任何人都可以帮忙吗？

Answer 1

梯度是一个好主意，你甚至可以为渐变添加内容，事无大小，只要它的大小是一个方形：

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>

Answer 2

你可以尝试有几个div，然后把它封装在一个div内。 查看我的代码JSfiddle。

.main { 
    width: 300px; 
    height: 300px; 
} 
.first { 
    width: 300px; 
    height: 150px; 
} 
.blue { 
    width:150px; 
    height: 150px; 
    position: relative; 
    float: left; 
    background-color: blue; 
} 
.yellow { 
    width:150px; 
    height: 150px; 
    position: relative; 
    float: right; 
    background-color: yellow; 
} 
.green { 
    width: 300px; 
    height: 150px; 
    background-color: green; 
    border-radius: 0 0 500px 500px; 
} 

.red { 
    position: relative; 
    height: 150px; 
    top: -400px; 
    border-left: 150px solid transparent; 
    border-right: 150px solid transparent; 
    border-bottom: 150px solid red; 
} 



<div class="main"> 
    <div class="first"> 
    <div class="blue"> 
    </div> 
    <div class="yellow"> 
    </div> 
    </div> 
    <div class="green"> 
    </div> 
    <div class="red"> 
    </div> 
</div>