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

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

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

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

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

注意點(diǎn)：    
邊框是繪制在背景之上，因此。有些透明的背景會(huì)與邊框重合。

總結(jié)：

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

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

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

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

相關(guān)文章

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

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

宋華 2019-08-26 12:22 評(píng)論0 收藏0
移動(dòng)端樣式小技巧

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

iOS122 2019-08-29 11:05 評(píng)論0 收藏0
移動(dòng)端樣式小技巧

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

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

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

Elle 2019-08-30 13:21 評(píng)論0 收藏0