如何實現這個使用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>