如何在div中添加底部曲線 - CSS？

以下是我的代碼，其中我無法創建底部曲線，但增加邊框頂部左半徑/邊框頂部右半徑無法創建如圖所示的凹凸。讓我知道如何才能使用CSS來處理這個問題。如何在div中添加底部曲線 - CSS？

代碼：

.container { 
 
    position: relative; 
 
} 
 
.rect { 
 
    width: 334.5px; 
 
    height: 223px; 
 
    background: #34EFEE; 
 
    text-align: center; 
 
    line-height: 223px; 
 
} 
 
.rect:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 334.5px; 
 
    height: 15px; 
 
    background: #FFFFFF; 
 
    left: 0; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
}

<div class="container"> 
 
    <div class="rect"> 
 
    <h3>334.5 X 223</h3> 
 
    </div> 
 
</div>

預期輸出 -

PLNKR - http://plnkr.co/edit/7oTCHyn8PFABri0KHSrH?p=preview

來源

2016-10-24 Nesh

試試這個代碼改變高度和邊框左上角的半徑樣

.container { 
 
    position: relative; 
 
} 
 
.rect { 
 
    width: 334.5px; 
 
    height: 130px; 
 
    background: #34EFEE; 
 
    text-align: center; 
 
    line-height: 223px; 
 
} 
 
.rect:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 334.5px; 
 
    height: 70px; 
 
    background: #FFFFFF; 
 
    left: 0; 
 
    border-top-left-radius: 80%; 
 
    border-top-right-radius: 100%; 
 
}

<div class="container"> 
 
    <div class="rect"> 
 
    <h3>334.5 X 223</h3> 
 
    </div> 
 
</div>

來源

2016-10-24 08:59:33

THX的代碼，但如果你發現你片斷中，凹凸是不是在中間，但在左側。 – Nesh

試試這個代碼：

.container { 
 
    position: relative; 
 
} 
 
.rect { 
 
    width: 334.5px; 
 
    height: 223px; 
 
    background: #34EFEE; 
 
    text-align: center; 
 
    line-height: 223px; 
 
} 
 
.rect:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 360px; 
 
    height: 360px; 
 
    transform: rotate(45deg); 
 
    background-color: #fff; 
 
    left: -11px; 
 
    bottom: -270px; 
 
    border-radius: 30px; 
 
}

<div class="container"> 
 
    <div class="rect"> 
 
    <h3>334.5 X 223</h3> 
 
    </div> 
 
</div>

來源

2016-10-24 09:06:39 Araz

您可以通過播放邊框和其他東西來編輯它 – Araz

– Araz

可以使用:after用於創建形狀的僞元素，併爲藍色背景添加大型box-shadow。

div { 
 
    width: 300px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    color: white; 
 
} 
 
div:after { 
 
    content: ''; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    height: 100px; 
 
    width: 120%; 
 
    border: 5px solid black; 
 
    transform: translate(-50%, 50%); 
 
    box-shadow: 0px 0px 0px 200px #00A2E8; 
 
    border-radius: 50%; 
 
    z-index: -1; 
 
}

<div>Lorem ipsum</div>

來源

2016-10-24 09:19:42

你是唯一一個想讓透明之後變成透明的東西的人（所以我已經錯過了），所以你從我這裏得到了一個讚賞:-) –

不妨通過另一個答案，這不是一個我期望你使用，但一個使用夾路徑。

body { 
 
    background: #eee; 
 
} 
 
div { 
 
    width: 300px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    color: white; 
 
    background: #00A2E8; 
 
    border-radius: 0 0 5px 5px; 
 
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 96% 99%, 92% 97%, 88% 95%, 84% 93%, 80% 91%, 76% 89%, 72% 87%, 68% 85%, 64% 83%, 60% 81%, 56% 79%, 52% 78%, 50% 78%, 48% 78%, 44% 79%, 40% 81%, 36% 83%, 32% 85%, 28% 87%, 24% 89%, 20% 91%, 16% 93%, 12% 95%, 08% 97%, 04% 99%, 0% 100%); 
 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 96% 99%, 92% 97%, 88% 95%, 84% 93%, 80% 91%, 76% 89%, 72% 87%, 68% 85%, 64% 83%, 60% 81%, 56% 79%, 52% 78%, 50% 78%, 48% 78%, 44% 79%, 40% 81%, 36% 83%, 32% 85%, 28% 87%, 24% 89%, 20% 91%, 16% 93%, 12% 95%, 08% 97%, 04% 99%, 0% 100%); 
 
}

<div>Lorem ipsum</div>

來源

2016-10-24 10:54:26

如何在div中添加底部曲線 - CSS？

回答

相關問題