css製做凸字型框

昨天在羣裏看到有人想作凸字型框,今天用幾分鐘作了一下,發現還蠻巧妙的,分享一下spa

最終效果以下所示
圖片描述code

代碼在這兒:https://codepen.io/woshilyy/p...blog

一開始我覺得只要上下兩個圓角矩形拼接就行,NO NO NO,其實兩個圓角相交處還有圓角,一看這個圓角就知道,能夠使用白色的圓角矩形覆蓋,那麼問題來了:
白色的圓角矩形覆蓋以後,中間會造成空隙,這個空隙須要藍色填滿。因此思路是這樣的:圖片

1、先創建上下兩個圓角矩形:
HTML:get

<span class="big"></span>
 <span class="top"></span>

二:在上面的圓角矩形左右各加一個藍色色的圓角矩形,與上下兩個矩形相切,可是長度和寬度都不能超過上下兩個大矩形it

![圖片描述][2]io

三:再在後來添加的小藍色矩形塊兒上,各增長一個大小一致的白色矩形覆蓋,分別設置右下圓角與左下圓角,代碼以下:class

border-radius: 0 0 20px 0;
border-radius: 0 0 0 20px;

OK,大功告成!一個凸型框就製做好啦,若是大佬有更好的方法,請指教嘻嘻~菜鳥的第一篇文章方法

相關文章
相關標籤/搜索