詳解CSS中左上朝向三角形(Top-Left Triangle)的幾種制作方式
發(fā)布時(shí)間：2018-12-13 15:55:43 作者：南屋流星 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了詳解CSS中左上朝向三角形(Top-Left Triangle)的幾種制作方式，主要介紹了三種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
今天我們介紹幾種，用css實(shí)現(xiàn)左上朝向三角形（Top-Left Triangle）的寫(xiě)法。
示意圖（以寬高各60px為例）：
這種三角形，一般可以用來(lái)做“對(duì)話框”類(lèi)型圖形的左下小腳。
第一種：
#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;
}
大家可以嘗試更多種的三角形做法，以及不同朝向的三角形。
這里強(qiáng)烈推薦一個(gè)常用css圖形的展示網(wǎng)站：https://css-tricks.com/the-shapes-of-css/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css制作tips提示框，氣泡框，制作三角形的實(shí)現(xiàn)
有時(shí)候我們的頁(yè)面會(huì)需要這樣的一些提示框或者叫氣泡框，這篇文章主要介紹了css制作tips提示框，氣泡框，制作三角形的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做2018-11-28
CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-22
CSS繪制三角形的實(shí)現(xiàn)代碼(border法)
這篇文章主要介紹了CSS繪制三角形的實(shí)現(xiàn)代碼(border法)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-11
這篇文章主要介紹了CSS代碼實(shí)現(xiàn)三角形和餅圖的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-03
純CSS制作各種各樣的網(wǎng)頁(yè)圖標(biāo)（三角形、暫停按鈕、下載箭頭、加號(hào)等）
這篇文章主要介紹了純CSS制作各種各樣的網(wǎng)頁(yè)圖標(biāo)（三角形、暫停按鈕、下載箭頭、加號(hào)等）的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)2018-03-27
這篇文章主要介紹了css實(shí)現(xiàn)帶圓角三角型的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-23
詳解css如何利用 :before :after 寫(xiě)小三角形
這篇文章主要介紹了詳解css如何利用 :before :after 寫(xiě)小三角形的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-22詳解CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)
本篇文章主要介紹了CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-29用CSS屬性transparent實(shí)現(xiàn)各種三角形示例代碼
這篇文章主要給大家介紹了如何用CSS屬性transparent實(shí)現(xiàn)各種三角形，文中給出了詳細(xì)的示例代碼，有需要的朋友們可以參考借鑒，下面來(lái)跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2016-12-18- 相信大家在日常網(wǎng)站布局中，經(jīng)常遇到一些三角形形狀的按鈕，有的人可能會(huì)想到用圖片代替，其實(shí)我們利用css就可以實(shí)現(xiàn)，本文給大家介紹了利用css繪制三角形的方法，以及一些2016-10-17
