這篇文章主要介紹了怎么用css實現(xiàn)凸字形狀，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站制作、網(wǎng)站設計、伽師網(wǎng)絡推廣、重慶小程序開發(fā)公司、伽師網(wǎng)絡營銷、伽師企業(yè)策劃、伽師品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供伽師建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
代碼在這兒：
body{
display:flex;
justify-content:center;
align-items:center;
.box{
position:relative;
width:400px;
height:400px;
top:200px;
color:lightblue;
.big{
position:absolute;
width:400px;
height:200px;
border-radius:20px;
background-color:currentColor;
bottom:0;
}
.top{
position:absolute;
width:100px;
left:calc((400px-100px)/2);
height:150px;
border-radius:20px20px00;
background-color:currentColor;
top:50px;
}
.top::before{
content:"";
position:absolute;
background-color:lightblue;
height:48px;
width:100px;
left:-100px;
top:102px;
}
.top::before{
content:"";
position:absolute;
background-color:lightblue;
height:48px;
width:100px;
left:-100px;
top:102px;
}
.top::after{
content:"";
position:absolute;
background-color:#fff;
border-radius:0020px0;
height:48px;
width:100px;
left:-100px;
top:102px;
}
.topR{
position:absolute;
background-color:lightblue;
height:48px;
width:100px;
right:50px;
top:152px;
}
.topR::after{
content:"";
position:absolute;
background-color:#fff;
border-radius:00020px;
height:48px;
width:100px;
left:0;
top:0;
}
}
}
一開始我以為只要上下兩個圓角矩形拼接就行，NONONO，其實兩個圓角相交處還有圓角，一看這個圓角就知道，可以使用白色的圓角矩形覆蓋，那么問題來了：
白色的圓角矩形覆蓋之后，中間會形成空隙，這個空隙需要藍色填滿。所以思路是這樣的：
一、先建立上下兩個圓角矩形：
HTML:
感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用css實現(xiàn)凸字形狀”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
重慶分公司
重慶分公司
