css使用border畫三角形

2021-09-19 11:23:31 字數 1284 閱讀 2231

前端中的很多地方都會用到三角形,比如tooltip等

css中建立三角形的方法很多,可以參考這裡:

css建立三角形(小三角)的幾種方法

比較簡單實用的還是使用border來建立三角形,今天主要研究這個的實現

將邊框分別設定為紅/黃/藍/綠

.********
效果如下:

四個三角形合成乙個正方形,大小為80x80,如果我們只想保留其中某個三角形的話,將其它的設定為透明即可,比如(以下css未改變部分與上面相同)

.********
效果:

ie6不支援transparent,所以不會透明而會顯示難看的黑色,不過也有解決方法:將透明的部分對應的border-style設為dashed即可

.********
正方形按對角線平分為兩個三角形的情況

.********

.********
需要指出的是,此時正方形的大小為40x40如果將border-width的某一邊設為0又會怎麼樣呢?也算是兩種情況

.********

.********
結果是長方形,其中一邊為80一邊為40。寬度被設為0的邊框對應方向的邊框會形成較大的三角形,且長度加倍

segmentfault的"採納"的顯示其實也是用三角形實現的

上部分是包含'採納'兩個字的塊狀元素,設定position: relative。下部分用偽類after設定乙個position: absolute的塊狀元素,將兩者接在一起。通過border-width設定成長方形而不是正方形,再將下方的三角形去掉即可,看下面的css十分明顯,這也是三角形的乙個很好的應用

.accepted-flag:after

使用border 畫三角形

先看看效果 step1 首先我們定義乙個div step2 設定一下div的初始樣式 效果是這個樣子 step3 修改css width 0px height 0px border width 50px 效果這個樣子 step4 修改border顏色 border color red transpa...

css畫三角形

好久沒寫css了,練練手,剛看了下在以前公司做過的乙個 現在已經改版,裡面有個模組涉及到用css畫三角形,試著做了一下,分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素,隨便什麼元素,不過我習慣性的會用塊元素來做。如果行內元素就displ...

CSS 畫三角形

使用 css 畫三角形?第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意,邊框相接的地方,即相鄰邊框的樣式。因為我們平時使用邊框,一般只幾畫素寬,所以可以不注意它們相接的樣式,但當邊框達到50畫素寬,就可以清楚看到,它們在相接時是如何處理的 這是...