【前端小技巧】利用border畫三角形及梯形

BigTomato 發(fā)布于2019-08-30 14:16 / 1216人閱讀

摘要：有些透明的背景會與邊框重合。總結(jié)設置一個邊有顏色，設置旁邊兩條邊顏色透明，不設置對邊三角形指向無設置邊的方向如情況設置一個邊有顏色，設置旁邊條邊顏色透明，其他兩條邊不設置如情況，是在圖的情況之上去掉了上邊

border是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色

值：
border-width  粗細  none/hidden/solid/dashed/dotted
border-color    顏色  默認顏色是字體顏色
border-style    類型  
可以綜合寫成：border:width color style

注意點：    
邊框是繪制在背景之上，因此。有些透明的背景會與邊框重合。

總結(jié)：

1.設置一個邊border有顏色，設置旁邊兩條邊border顏色透明，不設置對邊border,三角形指向無設置邊的方向（如6,7情況）
2.設置一個邊border有顏色，設置旁邊1條邊border顏色透明，其他兩條邊border不設置（如8情況，是在圖7的情況之上去掉了上邊）

云服務器 GPU云服務器畫三角形 html畫三角箭頭銷售經(jīng)驗及技巧小三角形

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115897.html

相關(guān)文章

前端特效【第04期】|果汁混合效果-下

摘要：往期回顧在上一期的前端特效里，我們已經(jīng)把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題先來回顧下咱們的果汁混合效果吧果汁混合效果，掃描下方二維碼就看到啦我們接著上期的內(nèi)容來繼續(xù)往下講吧，本期往期回顧在上一期的【前端特效】?里，我們已經(jīng)把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題 ...

宋華 2019-08-26 12:22 評論0 收藏0
移動端樣式小技巧

摘要：平時在移動端開發(fā)拼頁面的過程中總會遇到一些問題，主要是各手機樣式顯示效果不一致造成的。五左右寬度自適應第四個小技巧結(jié)尾，圖中的布局實際上是分左右兩塊的，依照的需求，文案是要左對齊，數(shù)字是要右對齊的。平時在移動端開發(fā)拼頁面的過程中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致造成的。以下總結(jié)了一些常見坑和一些小技巧，希望對看官有所幫助！本文只針對兩大手機陣營 Andr...

iOS122 2019-08-29 11:05 評論0 收藏0
移動端樣式小技巧

摘要：平時在移動端開發(fā)拼頁面的過程中總會遇到一些問題，主要是各手機樣式顯示效果不一致造成的。五左右寬度自適應第四個小技巧結(jié)尾，圖中的布局實際上是分左右兩塊的，依照的需求，文案是要左對齊，數(shù)字是要右對齊的。平時在移動端開發(fā)拼頁面的過程中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致造成的。以下總結(jié)了一些常見坑和一些小技巧，希望對看官有所幫助！本文只針對兩大手機陣營 Andr...

lufficc 2019-08-20 10:14 評論0 收藏0
css 實現(xiàn)各種基本圖形

摘要：三角形三個角分別是，此時畫五角星等價于畫三個三角形。所以理論上，通過控制一個三條的長度，進而實現(xiàn)不同大小的三角形是可行。實踐了一番，由于很難得到一個整數(shù)值，所以通過這種方法畫正五角形幾乎是無法實現(xiàn)的。三角形寫 css 的時候，用慣了背景圖，忽略了 css 本身其實可以實現(xiàn)很多簡單的基本圖形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 評論0 收藏0