CSS中左上朝向三角形(Top-Left Triangle)的幾種制作方式

20171112 發布于2019-08-30 15:54 / 2055人閱讀

摘要：今天我們介紹幾種，用實現左上朝向三角形的寫法。示意圖以寬高各為例這種三角形，一般可以用來做對話框類型圖形的左下小腳。第一種第二種第三種大家可以嘗試更多種的三角形做法，以及不同朝向的三角形。這里強烈推薦一個常用圖形的展示網站

今天我們介紹幾種，用css實現左上朝向三角形（Top-Left Triangle）的寫法。

示意圖（以寬高各60px為例）：

這種三角形，一般可以用來做“對話框”類型圖形的左下小腳。

第一種：

#triangle-topleft {
  border: 30px solid #e6686e;
  height: 0;
  width: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

第二種：

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 60px solid #e6686e;
  border-right: 60px solid transparent;
}

第三種:

#triangle-topleft {
  border: 60px solid transparent;
  width: 0;
  height: 0;
  border-left-color: #e6686e;
  border-top-width: 0;
}

大家可以嘗試更多種的三角形做法，以及不同朝向的三角形。
這里強烈推薦一個常用css圖形的展示網站：https://css-tricks.com/the-sh...

Written by：EdenSheng
Email：singlesaulwork@gmail.com

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117047.html

CSS 搞事技巧：border+transparent

摘要：默認盒模型的正方形在上方已經說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵介紹出門忘帶電源線，快遞到了終于可以繼續水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當時處于懵逼狀態，錯過了大好的機會：面試官：巴拉巴拉吧…… 我：嗯，啊，這個，...

nifhlheimr 2019-08-29 18:37 評論0 收藏0
css使用border畫三角形

摘要：寬度被設為的邊框對應方向的邊框會形成較大的三角形，且長度加倍的采納的顯示其實也是用三角形實現的上部分是包含采納兩個字的塊狀元素，設置。前端中的很多地方都會用到三角形，比如tooltip等CSS中創建三角形的方法很多，可以參考這里： CSS創建三角形（小三角）的幾種方法比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現將邊框分別設置為紅/黃/藍/綠 .triang...

張紅新 2019-08-28 18:20 評論0 收藏0
使用CSS生成圖標

摘要：理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的屬性設為現在上下左右個邊框都是三角形了。實例二制作快進按鈕效果為了減少頁面的元素，我們可以只提供一個元素實現第個三角形，然后借助的偽類實現第個三角形。有一次筆者在參加前端面試的過程中被面試官問到這樣一個問題： BootStrapt里面的圖標是怎么樣的？用過Bootstrapt的開發者都知道，在Bootstrapt里面有一個圖標組件，...

helloworldcoding 2019-08-29 11:18 評論0 收藏0
使用CSS生成圖標

摘要：理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的屬性設為現在上下左右個邊框都是三角形了。實例二制作快進按鈕效果為了減少頁面的元素，我們可以只提供一個元素實現第個三角形，然后借助的偽類實現第個三角形。有一次筆者在參加前端面試的過程中被面試官問到這樣一個問題： BootStrapt里面的圖標是怎么樣的？用過Bootstrapt的開發者都知道，在Bootstrapt里面有一個圖標組件，...

godiscoder 2019-08-01 15:42 評論0 收藏0