昨天在羣裏看到有人想作凸字型框,今天用幾分鐘作了一下,發現還蠻巧妙的,分享一下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,大功告成!一個凸型框就製做好啦,若是大佬有更好的方法,請指教嘻嘻~菜鳥的第一篇文章方法