利用CSS畫三角形原理

下面介紹CSS畫三角形的原理

一、首先畫一個div牡辽,給它寬高和背景顏色。再加上四條邊的邊框催享。

二因妙、div的width票髓、height置零铣耘,看看效果。(注意裆操,這里把div的背景顏色也去掉炉媒。因為背景顏色是擴展到邊框的,如果不去掉背景顏色吊骤,那么下面背景顏色會顯示在透明的邊框上。)

三传泊、下面把左鸭巴、右邊框變成透明

四鹃祖、去掉下邊框。下面是等腰三角形

CSS三角形原理是:元素高度寬度為0惯豆,且沒有下邊框,左右邊框透明即可地熄。

要想畫直角三角形。直接去掉右邊框即可端考。

參考文獻:

https://www.zhihu.com/question/35180018

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末却特,一起剝皮案震驚了整個濱河市筛圆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌太援,老刑警劉巖扳碍,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仙蛉,死亡現(xiàn)場離奇詭異,居然都是意外死亡荠瘪,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門趁餐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人澎怒,你說我怎么就攤上這事阶牍。” “怎么了走孽?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵琳状,是天一觀的道長。 經(jīng)常有香客問我念逞,道長,這世上最難降的妖魔是什么硕盹? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任叨咖,我火速辦了婚禮,結(jié)果婚禮上甸各,老公的妹妹穿的比我還像新娘。我一直安慰自己趣倾,他們只是感情好,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布部凑。 她就那樣靜靜地躺著露乏,像睡著了一般瘟仿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上劳较,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天浩聋,我揣著相機與錄音,去河邊找鬼衣洁。 笑死,一個胖子當著我的面吹牛坊夫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播环凿,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼羽杰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起考赛,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤莉测,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悔雹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡梯找,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年益涧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡浅辙,死狀恐怖阎姥,靈堂內(nèi)的尸體忽然破棺而出记舆,到底是詐尸還是另有隱情呼巴,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布诊赊,位于F島的核電站,受9級特大地震影響碧磅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鲸郊,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一团搞、第九天 我趴在偏房一處隱蔽的房頂上張望严望。 院中可真熱鬧逻恐,春花似錦、人聲如沸复隆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骨饿。三九已至,卻和暖如春宏赘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背察署。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人休吠。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓业簿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親梅尤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 用CSS畫一個三角形酝蜒,是不難的問題矾湃,但我卻掌握的不夠熟練,例如當要求為畫一個直角三角形或者等腰三角形邀跃,我就有點反應(yīng)...
    藍線閱讀 988評論 0 3
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,751評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素途戒;行內(nèi)(內(nèi)聯(lián)、inline-level)元素喷斋。 塊元素的...
    饑人谷_小侯閱讀 2,002評論 1 4
  • 一直在調(diào)整我手寫的姿勢 要用什么顏色才能畫出你的心事 于是 我用想象牽住了你的手指 在這片白紙上跳了一曲華...
    若文夕閱讀 349評論 0 1
  • 我想不通為什么丁俊逸還能對我露出這樣的神情星爪,他難道不知道,現(xiàn)在他只是我的手下敗將嗎粉私? 誠然我之前被他給打敗了,而且...
    浮生萬夢星耀燭天閱讀 90評論 0 1