CSS繪制三角形—border法（詳例）

. 實現一個簡單的三角形

使用CSS盒模型中的border（邊框）即可實現如下所示的三角形：

CSS實現簡單三角形

實現原理：

首先來看在為元素添加border時，border的樣子；假設有如下代碼：

<div></div>

div {
    width: 50px;
    height: 50px;
    border: 2px solid orange;
}

效果圖：

border的一般使用

這是我們平常使用border最普遍的情況——往往只給border一個較小的寬度（通常為1-2px）；然而這樣的日常用法就會容易讓大家對border的形成方式產生誤解，即認為元素的border是由四個矩形邊框拼接而成。

然而事實并不是這樣。實際上，元素的border是由三角形組合而成，為了說明這個問題，我們可以增大border的寬度，并為各border邊設置不同的顏色：

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

效果圖：

border的形成方式

既然如此，那么更進一步，把元素的內容尺寸設置為0會發生什么情況呢？

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

效果圖：

元素內容尺寸為0

我們將驚奇地發現，此時元素由上下左右4個三角形“拼接”而成；那么，為了實現最終的效果，即保留最下方的三角形，還應該怎么做？很簡單，我們只需要把其它border邊的顏色設置為白色或透明色：

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

最終效果

Duang~ 最終的簡單三角形就繪制出來了。同理，如果想要得到其它邊上的三角形，只需要將剩余的border邊顏色設置為白色或透明色即可。

不過，被“隱藏”的上border仍然占據著空間，要想使得繪制出的三角形尺寸最小化，還需要將上border的寬度設置為0（其它情況同理）：

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}

2. 實現帶邊框的三角形

帶邊框的三角形是指為三角形添加其它顏色的邊框，如同為元素添加border一樣：

帶邊框的三角形

由于不能繼續通過為已有三角形設置border的方法來為其設置邊框（因為三角形本身就是利用border實現的），所以只好另想辦法。而能想到的一個最自然的方法就是三角形疊放，即把當前三角形疊放在更大的三角形上方，上圖所示的實現方法就是把黃色三角形放在了尺寸更大的藍色三角形上。

為了實現這樣的效果，需要利用絕對定位方法：首先定義出外面的藍色三角形：

<div id="blue"><div>

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}

效果為：

外圍藍色三角形

隨后需要定義黃色三角形，由于黃色三角形的定位需要參考藍色三角形的位置，所以需要用到絕對定位方法。為此還需要將黃色三角形作為藍色三角形的子元素。一個可行的辦法是在藍色三角形內部定義一個額外的標簽以表示黃色三角形，但為了節約標簽起見，更好的辦法是使用偽元素:

#blue:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到的效果為：

定義黃色三角形

需要特別注意此時定義出的黃色三角形與藍色三角形之間位置的偏移關系，該偏移將受到top、left（本例中）以及黃色三角形本身border寬度的共同影響。

可能會有這樣的疑問：為什么黃色三角形會向左偏移一段距離呢，按道理不應該完全重合在藍色三角形上嗎，就像下面這樣？

黃色三角形與藍色三角形完全重合

如果有這樣的疑問，說明還沒有對絕對定位產生足夠的認識。絕對定位的區域是基于絕對定位父元素的padding區域，然后在此基礎上運用top、left、right、bottom等一系列屬性來約束絕對定位子元素的位置。在本例中，由于藍色三角形作為絕對定位父元素，其內容的尺寸為0，則內容區域就是該三角形的上頂點：

絕對定位區域

對于黃色三角形，由于設置了left: 0和top: 0，所以黃色三角形的所有內容（包括border、margin）將根據藍色三角形的上頂點進行定位。可以把此時left: 0和top: 0分別看作是兩面“隔墻”——即上隔墻和左隔墻，黃色三角形的所有內容只能在上隔墻的下方和左隔墻的右方區域。

由于黃色三角形的內容區域也位于其頂點處，且對其設置了左右各40px的border，所以黃色三角形的內容區域將向右偏移40px，從而形成了之前的效果。

想想看將黃色三角形的位置設置為left: 0和bottom: 0,會得到怎樣的定位效果？（下圖所示）

黃色三角形設置為left: 0和bottom: 0

搞懂了絕對定位后，只需要在原代碼上稍作修改就可以將黃色三角形的頂點與藍色三角形頂點相重合，同時還應該適當縮小黃色三角形的尺寸（按相似三角形等比例縮小）：

#blue:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到：

黃色三角形與藍色三角形頂點重合

在上面的代碼中，特意刪除了之前對width: 0和height: 0的設置，因為子元素具有position:absolute設置，這會使得元素尺寸在不顯式設置寬度和高度的情況下，收縮到元素內容的尺寸，由于內容設置的是content: ""，所以子元素的尺寸默認也就是0了。故設置width: 0和height: 0就變得多余了。

最后一步就是利用top將黃色三角形向下移動至合適的位置：

#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到最終效果：

最終效果

學會了帶邊框三角形的繪制，那么實現類似如下三角形箭頭自然也是不在話下了：

三角形箭頭

實現代碼：

#blue:after {
    content: "";
    position: absolute;
    top: 2px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent #fff;
}

3. 繪制其它角度的三角形

繪制其它角度的三角形，如：

code :
.mate::before{
    content: '';
    width: 0;
    height: 0px;
    border-bottom: 32px solid blue;
    border-right: 20px solid transparent;
    position: absolute;
    top: 0px;
    left: 0px;
}

下圖：
.mate::before{
    content: '';
    width: 0;
    height: 0px;
    border-top: 32px solid #d72ce8;
    border-right: 20px solid transparent;
    position: absolute;
    top: -1px;
    left: -3px;
}

就更簡單了，其實它們都是基于之前繪制的三角形而來的。如果想繪制右直角三角，則將左border設置為0；如果想繪制左直角三角，將右border設置為0即可（其它情況同理）。

原文鏈接：https://www.jianshu.com/p/9a463d50e441

言

目前，教學、教研各種內容線上沉淀、展示豐富多彩，但線上內容“線下化”能力不足或過分依賴人力，比如，線上練習題組卷后以PDF形式分發給學生，家長希望將考試、練習題目打印后，學生帶到學校去做（高中生使用手機等電子設備的時間有限），線上各類分析報告以PDF形式分享給學生/家長等。

從業務方面看，不同業務線的多個業務場景都有輸出PDF的訴求，如果各業務線自己設計、實現符合自身業務場景的具體方案，除調研、開發工作量較大之外，還會有重復調研，踩坑的情況。

從技術角度看，線上內容轉PDF的內容源頭來自于H5富文本內容，業界內以此為基礎的PDF生成方案多種多樣，也各有優劣，比如：

方案對比-表格-1

因此，我們綜合了各種PDF生成方案并總結了在探索講義生成PDF過程中的經驗，抽象出了一套通用的，可復用的能力供各業務線快速利用，基本方案和優劣如下：

最終方案-表格-2

目標

旨在提供一套以H5為載體的PDF通用生成方案，這套方案有如下特點：

通用性強：能夠處理各類H5頁面，從分頁到生成，做到一套方案，多般兼容。
擴展性、配置性強：各場景可根據自己的需要自定義頁眉、頁腳、頁碼，水印，背景等配置，做到輸出形式豐富多彩。
方便易接入：各業務場景只需關注要展現的內容，無需關注分頁，PDF生成等背后的處理，為需要產出PDF的業務場景提效賦能；整體來看，調研、設計、開發（+踩坑）一整套 H5 轉 PDF的能力至少需要近 30人/日，我們希望這套通用能力的接入成本控制在 7人/日左右；在很多場景接入后，從實際反饋來看，平均只需要 2-3 人/日就接入了。
質量高：保證輸出PDF中內容的展示與H5中無異，各種復雜公式的展示也絲毫無差錯。
性能好：保證 1 分鐘內能處理 100+ 的 20頁左右的PDF生成任務
穩定性高：保證有各種兜底策略妥善處理各類異常，同時能夠通過限流方案應對突發流量，保證服務穩定。

這套方案可分為兩個核心部分，頁面展示側 - Medusa，PDF生成側 - Hydra

頁面展示側 - Medusa

我們頁面展示側的通用能力——Medusa，是基于Paged.js的二次封裝，并以NPM包形式提供給業務方使用。Medusa可對任何HTML進行分頁、并根據配置添加頁眉、頁腳等，最終將處理后的HTML渲染到頁面中。Medusa封裝并簡化了對PDF格式的配置，可覆蓋絕大多數業務場景，使得各業務場景將更多精力投入其自身業務邏輯的開發。

之所以選擇Pagedjs為基礎開發我們自己的SDK，是因為它是目前我們能找到的唯一開源的、具有HTML內容分頁，樣式處理的前端庫，同時我們也在講義中經過了長期的摸索與沉淀。

接下來將詳細介紹Paged.js原理、Medusa支持的功能與使用方法。

一 Paged.js是如何工作的

Paged.js包含了 3 個大模塊

Chunker（負責HTML內容分頁）
Polisher （負責CSS樣式處理）
Previewer （負責預覽呈現Chunker和Polisher處理后的內容）

這里將主要介紹 Previewer 和 Chunker，因為我們的二次開發和維護不涉及到Polisher。

Previewer

Previewer 的工作非常簡單，但我們會主要利用它封裝我們的Medusa，初始化一個Previewer對象，Previewer初始化了Chunker和Polisher對象：

Medusa-代碼-1

再調用Previewer的preview()方法，preview()方法做了兩件事：

通過Polisher處理樣式內容
通過Chunker處理需要分頁的HTML內容，如果沒有指定需要分頁的HTML，則會處理整個Body的內容

Medusa-代碼-2

當chunker.flow結束，即可在瀏覽器看到整個頁面處理完之后的樣子。

Chunker

首先，Chunker解析、預處理需要分頁的HTML，為其添加一些必要的屬性

Medusa-代碼-3

然后創建容納所有頁(pages)的容器，并掛載到renderTo容器下(默認Body)，以備組織后續的所有頁：

Medusa-代碼-4

接著，chunker創建了一個page模版，以便增加頁面使用：

Medusa-代碼-5

其中，TEMPLATE是Pagedjs內部創建頁面時所使用的基礎模版。

Medusa-代碼-6

接下來，chunker進入了渲染+分頁過程（這個過程我們不會在二次開發中做修改，但需要了解其基本思路以便在出問題時能有解決思路），這個過程在循環一個迭代器（*layout），迭代器一直在做3件事：

將內容添加到模版內容區域的容器中 -> 渲染。
探測overflow，找到overflow的offset并創建BreakToken （探測overflow過程中很多處都用到了迭代器，此處為了說明思路，簡化了相關代碼）。

原則：

尋找overflow時會將盡可能多的內容節點插入內容區域，這里，“盡可能多”分為幾種情況，比如：

沒有剩余節點需要再添加了
達到了一頁所能承載的最大字符數；剛開始的時候，如果沒有指定每頁的最大字符數，Pagedjs會給一個默認值為 1500 的每頁最大字符用做判斷，在之后會記錄分隔好的每一頁中的字符數，并取最近4頁（少于4頁取全部）的平均值作為之后分頁的判斷條件，這里，Pagedjs相當于對每一頁中能夠承載的內容做了一個簡單的預測，這個算法對于比較規律的內容做分頁時還是比較簡單高效的。

步驟：

Pagedjs遵循了如下步驟去尋找overflow：

兩個前置條件：

內容區域盒子邊界已經確定，下面以contentArea.right 和 contentArea.bottom 分別代指其右邊界和下邊界。
處理過程中每個節點的邊界可以計算（對于文字節點，Pagedjs中使用了Range對象為其創建邊界），下面以 node.left、 node.right、node.top 和 node.bottom 分別代指節點的左、右、上、下邊界。

i. 從需要處理的內容第一個節點開始，判斷是否 node.left >=contentArea.right || node.top >=contentArea.bottom

Medusa-代碼-7

ii.如果不滿足，則判斷 node.right <=contentArea.right && node.bottom <=contentArea.bottom

Medusa-代碼-8

iii.如果不滿足，那說明有子節點overflow了，則繼續深入其子節點查找即可。

3.使用模版添加新的頁面，并從BreakToken處繼續上述動作。

二 Medusa支持的功能及使用方法

基于Paged.js，Medusa支持了如下功能，并為業務方提供了更加簡潔、定制化的配置。

動態頁面分頁能力
單頁模版配置 -> 生成能力
前、后置靜態頁面生成、與分頁后的動態頁面拼接能力
頁面處理成功后，通知PDF生成服務(Hydra)執行任務

下方是調用Medusa的代碼示例：

Medusa-代碼-9

1.1 動態頁面分頁能力

Medusa核心功能，可將連續的HTML頁面轉化成一頁頁PDF樣式的HTML。

1.2 單頁模版配置 -> 生成能力

通過Grid布局，Paged.js將一個單頁模版分為多個區域，整體分為2個大的部分：

base 頁面基礎配置：每個PDF紙型、水印，內容區域的寬高、margin與padding等等
surround 頁面周圍區域：如頁眉、頁腳等配置

業務方通過簡單的配置，即可還原UI設計稿中的PDF樣式，例子如下圖：

1.2.1 base

頁面基礎配置是對每頁的。支持紙型或頁面寬高、內容區域margin、padding、背景及水印的設置。

在封裝Medusa時，Medusa將讀取傳入的頁面模版配置、靜態頁內容配置，并將樣式上的配置解析并轉化為Previewer可理解的樣式內容，比如頁面寬高的設置：

Medusa-代碼-10

將被轉化為：

Medusa-代碼-11

1.2.2 surround

可以看到圖中的16種不同位置的surround區域。通過設置position，可將業務方自定義的元素渲染到對應的位置上。

2. 目前支持3種類型的surround item:

text 文字
img 圖片
pageNum (動態獲取)當前頁碼

example:

Medusa-代碼-12

1.3 前/后置靜態頁面

業務方可通過如下方式配置靜態頁面的具體內容：

Medusa-代碼-13

其中，傳入的React JSX Element將會被這樣處理：

Medusa-代碼-14

處理完成后，將HTML String拼接到頁面模版中，再插入分頁后內容的前后。

PDF生成側 - Hydra：

頁面展示側為PDF生成做好了頁面的準備，對于PDF生成側，需要做的工作就更純粹了，業務方除了請求生成PDF，定期檢查PDF生成的進度，無需做任何額外工作。

1.整體流程：

PDF生成是CPU和內存密集型的，由于頁面內容的不確定性，也意味著頁面渲染時間與生成PDF的時間都是不確定的，因此整體PDF生成的鏈路被設計成是異步的，如下圖：

整體流程上，業務方在請求生成PDF時，會先在后端做一條記錄，后端再將任務發送給Node服務，即Hydra；

在生成PDF時，第 1 步是做頁面上的準備，一個生成任務可能有多個URL頁面需要生成PDF，所以我們預先啟動對應URL數量的PPTR Page，頁面都啟動完成后，進入下一步；

第 2 步：渲染頁面，這個過程中，如果請求是包含多個URL的，這些頁面會同步渲染，在所有頁面渲染完成后，進入下一步。

第 2.5 步，如果是需要生成連續頁碼的一整個PDF，還會做額外的一個動作：頁碼矯正，通過頁碼矯正，可以將同步渲染的每個頁面，按照其之前頁面的頁碼數修正，以保證整體PDF的頁碼的連貫。

第 3 步，通過PPTR Page的能力將頁面轉換為PDF buffer，如有必要，再將生成的PDF buffer拼接到一起生成一整個PDF，或者將每個PDF buffer都生成一個PDF，壓縮成zip文件。

第 4 步，文件上傳OSS，最終返回OSS CDN鏈接。

2.請求生成PDF：

業務側請求將對應頁面生成PDF的時，只需傳入如下字段：

Hydra-代碼-1

3.PDF生成過程：

正如在整體流程中所述，PDF生成側，我們借助 PPTR 的能力打開頁面并生成PDF流。

在頁面調用 Medusa 分頁、組裝能力時，所有內容分頁組裝完成后會向body中插入了一個額外的DOM以標識該頁面處理完成：

Hydra-代碼-2

這是為了 Hydra 感知頁面渲染完成所做的準備，當生成服務的 PPTR 等到該DOM出現時，則表示頁面成功渲染并處理完成了：

Hydra-代碼-3

此后，在上面已經提到過，對于需要將多個頁面生成的PDF拼接成一個PDF的情況，在生成PDF之前需要做一個重要的動作，即頁碼矯正，原因如下：

每個頁面無法感知其他頁面情況的，如：第二個頁面不知道第一個頁面會生成多少頁的PDF。
它們的頁碼需要是連續的。

并且我們不希望頁面的處理是串行的，因為串行勢必導致速度較慢，生成時間長。

這個問題的解決方案如下：

1. 對于每個頁面都啟用一個page，并同時處理

2. 每個頁面處理完成后（pdfLastDOM出現），通過Page.$eval()來統計頁數并記錄:

Hydra-代碼-4

3. 計算出頁面中分頁之后每一個頁面的起始頁碼，以及所有頁面的頁碼總和

4. 再修改頁碼容器樣式的 counterReset 值即可，其后續頁碼可自遞增。

Hydra-代碼-5

5. 之后，再通過 Medusa 在頁面window對象中Polyfill的相關配置，比如需要生成的PDF的單頁寬、高以生成PDF流。

Hydra-代碼-6

6. 最后如有必要，通過pdf-lib拼接這些 pdfBuffer 即可。

Hydra-代碼-7

7. PDF生成完成后，上傳OSS并返回URL鏈接

4.性能、穩定性保證：

在整體方案落地前，我們對服務進行了多次性能測試：

以下載題目為例，在4個容器，每個容器 3C 12G 的配置下的并行處理能力如下：

對于 20 道題目，每個PDF生成任務在 15 頁左右，平均 1 分鐘內能完成 280 個任務的處理。

對于 40 道題目，每個PDF生成任務在 30 頁左右，平均 1 分鐘內能完成 105 個任務的處理。

對于 60 到題目，每個PDF生成任務在 40 頁左右，平均 1 分鐘內能完成 54 個任務的處理。

同時，根據 Hydra 服務的整體的處理能力，后端通過任務隊列的形式幫助我們保證服務不被瞬間的突刺流量擊垮。

已接入/正在接入的相關業務線及場景：

目前，公司有 5 大業務線，8 個場景已經完全接入我們的能力用于 H5 轉 PDF，如下是錯題本、內容資料庫接入后生成的PDF樣例：

錯題本：

內容資料庫試卷：

未來展望

目前整體的PDF生成方案已經能夠滿足大多數場景和內容，但依然有可改進空間。

HTML的流式布局要求我們必須手動的對內容分頁，才能添加頁眉，頁腳等（即Mdusa做的工作），正因為如此，在處理復雜的內容時，可能會出現一些問題：比如，遇到復雜表格時，由于表格可能會有多種多樣的行、列合并，同時表格單元格內的內容也可以多種多樣，在分頁過程中，Medusa內部的PagedJS并不能完美的處理對于長、且復雜的表格的分割，因此可能遇到分割后表格單元格缺失、錯亂或寬高錯誤的問題，這些問題在講義中體現較明顯。

我們仍在持續關注與研究復雜DOM內容的分割問題，會嘗試加以優化和改進PagedJS的能力，同時，我們也以另外一種思路設計了自己的DOM分頁器方案，但經過評估，由于實現比較復雜，成本較高，暫時沒有投入開發資源。

不過，我們相信，未來我們一定能以更完美的方式分割DOM以生成更高質量的PDF。

作者:高源、陳欣博

來源:微信公眾號:高途技術

出處:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg

ss一般用于布局排版，不過在某些場合css也可以方便地生成幾何圖形，比如下面這樣的圖形：

幾何圖形的生成方案

當我們想要顯示上面這些幾何圖形，怎么做呢？有很多種方案，一般是插入一個圖片，或者用js在canvas上畫一個，也可以用上次講的圖標字體來做，哪種方案好呢？其實各種做法都有優缺點：

圖片：簡單，沒啥技術含量，但是要另外調用尺寸較大的圖片文件，也不方便變換大小和顏色，典型的體力活兒
canvas：優點是靈活性大，但手工繪制有點麻煩，跟圖文排版混入也有些不方便
圖標字體：形狀有限，要另配字庫文件，單獨制作也很麻煩
純CSS的解決方案：簡單，快速高效，靈活，無需配合其他技術，也便于跟圖文的混排，但主要靠動腦筋來解決問題，有時候弄復雜了就比較燒腦

幾何圖形的純CSS解決方案

所以今天開始，我們就說一些用純css的解決方案，從核心技術上，大致可分3種：

1、以邊框特性為核心，配合旋轉和拼接

2、以clip-path為核心的剪切手法

3、以內聯SVG為核心的解決方案

以邊框特性為核心生成幾何圖形的原理

今天講的是第一種方案，其原理非常有意思，我們先做一個三角形了解下：

html代碼，1個div塊就夠了

<div class="SanJiaoU"></div>

css代碼如下:

.SanJiaoU {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #e00;
}

好了，一個漂亮的三角形出現了

是不是很神奇呢？現在來說一下它的原理，你就恍然大悟了！

原理很巧妙，仔細看這個手繪圖，它利用的是矩形的邊框在4個角上天然形成的斜邊交界，當矩形設置成寬高都是0的時候，主體沒了，但還剩下邊框的4個角連在一起可見，此時只要把不需要的邊框部分設置成透明，剩下的就是我們要的三角了。

在前面的例子里，上下左右4條邊框我們只設置了3個，其中上邊框無，左右邊框寬70顏色為透明，下邊框寬120顏色為紅色，于是就顯示出紅色下邊框與左右透明邊框交界形成的三角了，它的底邊寬是70x2=140，高是120。

幾何圖形應用示例

原理明白了，那么剛才是正三角，倒三角怎么做呢？類推一下，顯然應該是由上邊框與左右透明邊框來形成，也就是把 border-bottom 改成 border-top，其余不變

.SanJiaoD {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 120px solid #e00;
}

成功：

好，現在我們就開始神奇的CSS形狀養成之旅吧！

我把形狀一個個貼出來，你先動動腦筋看自己能不能琢磨出來，然后參考下我的css代碼和提示，這個過程還是蠻有意思的。

.SanJiaoL {
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-right: 120px solid #e00;
}

向左的三角是以右邊框為主體形成的

.SanJiaoR {
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-left: 120px solid #e00;
}

向右的三角是以左邊框為主體形成的

嗯，看著沒難度，現在變一下，直角三角形怎么弄？其實更簡單，直角只需2個邊框就可以構成，看看這兩個圖形：

.SanJiaoZUL {
border-left: 120px solid transparent;
border-bottom: 120px solid #e00;
}
.SanJiaoZUR {
border-right: 120px solid transparent;
border-bottom: 120px solid #e00;
}

倒過來呢？

.SanJiaoZDL {
border-left: 120px solid transparent;
border-top: 120px solid #e00;
}
.SanJiaoZDR {
border-right: 120px solid transparent;
border-top: 120px solid #e00;
}

稍微變通一下，試試立體的，這個是指南針形狀：

/*上面2個尖*/
.SanJiaoU2 {
border-left: 20px solid transparent;
border-bottom: 90px solid #d00;
position: relative;
}
.SanJiaoU2::after {
content: "";
border-right: 20px solid transparent;
border-bottom: 90px solid #a00;
position: absolute;
}
/*下面2個尖*/
.SanJiaoD2 {
border-left: 20px solid transparent;
border-top: 90px solid #d00;
position: relative;
}
.SanJiaoD2::after {
content: "";
border-right: 20px solid transparent;
border-top: 90px solid #a00;
position: absolute;top:-90px;
}

原理很簡單，2個直角三角形左右拼接，顏色不同，然后上下再拼接。

注意啊，這里用了after這個偽類，目的就是拼接下一個形狀。由于有拼接，所以就需要通過

position和left，top這幾個屬性來控制2個元素的位置，詳細看代碼，在后面的示范中，我們會大量用到這個技巧。

.JianTou1 {
width: 80px; height: 80px;
transform: rotate(-45deg);
box-shadow: 25px 25px 0px 0 red;
}

這是一個箭頭，我們先用box-shadow這個屬性做一個直角，然后用 transform: rotate 旋轉45度，得到這個箭頭。這個技巧后面也會大量使用，請留意！

.JianTou2 {
width: 80px; height: 80px;
transform: rotate(-45deg);
box-shadow: 25px 25px 0px 0 red;
position: relative;
}
.JianTou2::after{
content: "";
width: 80px; height: 80px;
box-shadow: 25px 25px 0px 0 red;
position: absolute;left:40px;top:40px;
}

會做一個箭頭，當然就會做2個箭頭，用after拼接一下就行了

.JianTou3 {
width: 160px; height: 80px;
background:
linear-gradient(-135deg, transparent 27px, #e00 0) top right,
linear-gradient( -45deg, transparent 27px, #e00 0) bottom right;
background-size: 100% 50%;
background-repeat: no-repeat;
border-radius:10px;
color:#fff;font-size: 32px;line-height: 80px;padding-left: 30px;
}

導航箭頭，這個代碼是用 linear-gradient 在矩形的右側上下各切了一個角做成的。

.TiXing{
width: 90; height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e00;
}

梯形跟三角形的區別，僅僅是width非0而！

.PingXing{
width: 160px; height: 60px; margin-left: 30px;
transform: skew(-45deg);
background:#e00;
}

平行四邊形，是用 transform: skew 把正常的矩形推歪一個角度即可，簡單吧！

好，前面還都是比較簡單的形狀，現在來點復雜的

.LiuJiao{
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 115px solid #e00;
position: relative;
}
.LiuJiao::after{
content: "";
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 115px solid #e00;
position: absolute;left:-70px;top: -155px;
}

六角形，是2個三角形，一上一下，一正一反，通過after拼接

.WuBian{
border-left: 73px solid transparent;
border-right:73px solid transparent;
border-bottom: 53px solid #e00;
position: relative;
}
.WuBian::after{
content:""; width: 90; height: 0;
border-left: 28px solid transparent;
border-right:28px solid transparent;
border-top: 86px solid #e00;
position: absolute;top:53px;left:-73px;
}

五邊形，是三角形加梯形

.BaBian{
width: 140px; height: 60px;
background-color: #e00;
position: relative;
}
.BaBian::before,.BaBian::after{
content:""; width: 60; height: 0;
border-left: 40px solid transparent;
border-right:40px solid transparent;
position: absolute;
}
.BaBian::before{ top: 60px;border-top: 40px solid #e00; }
.BaBian::after { top:-40px;border-bottom: 40px solid #e00; }

八邊形，我是用矩形加一前一后兩個梯形，用的是before和after來拼接前后梯形。

.Xin{
width: 80px;height: 80px;
background-color: #e00;
transform: rotate(-45deg);
position: relative;left:30px;
}
.Xin::before,.Xin::after{
content: "";width: 80px;height: 80px;
border-radius:80px;
background-color: #e00;
position: absolute;
}
.Xin::before{ left: 0px;top:-40px;}
.Xin::after { left:40px;top: 0px;}

心形，是以一個方塊為核心（轉45度），用before和after外加2個圓組成的，有意思吧？

.PingXingXie{
width: 160px; height: 60px;
transform: rotate(-45deg) skew(-45deg);
background:#e00;
}

斜的平行四邊形，顯然是rotate和 skew 兩個變形處理合起來造成的。

.ShuiDi{
width: 60px; height: 60px;
border: 20px solid #e00;
border-radius: 50px 0 50px 50px;
transform: rotate(-45deg);
}

空心的水滴，看著很復雜，其實很簡單，正方形的4個角，把其中3個設置成圓角，然后整體旋轉45度讓尖朝上就可以了，核心就是一句 border-radius: 50px 0 50px 50px; 好奇妙啊！

.ShuiDi1{
border: 50px solid #e00;
border-radius: 50px 0 50px 50px;
transform: rotate(-45deg);
}

實心的水滴，跟前面的手法略有不同，我是把正方形的邊長弄成0，然后直接用邊框形成的！

.ShuiDi2{
width: 60px; height: 60px;
border: 20px solid #e00;
border-radius: 50px 0 50px 50px;
transform: rotate(45deg);
}
.ShuiDi2::after{
width: 60px; height: 60px;
content: "";
border: 20px solid #e00;
border-radius: 50px 0 50px 50px;
transform: rotate(-180deg);
position: absolute; top: -100px;left: 60px;
}

這是水滴的另一個變通使用，2個水滴拼接而成

.LingXing{
width: 100px; height: 100px;
background-color: #e00;
transform: rotate(45deg);
}

菱形，就是正方形旋轉一下

.ZuanShi{
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 40px solid #e00;
position: relative;
}
.ZuanShi::after{
content: "";
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 80px solid #e00;
position: absolute; left:-70px;top: 40px;
}

鉆石，是2個三角拼接，代碼有點粗暴，可能有更好的做法

.ZuanShi1{
width:70px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 40px solid #e00;
position: relative;
}
.ZuanShi1::after{
content: "";
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 80px solid #e00;
position: absolute; left:-25px;top: 40px;
}

平頭的鉆石，是梯形和三角拼接

.JianTou{
width:10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 100px solid #e00;
position: relative;left:50px;
}
.JianTou::after{
content: "";
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 20px solid #e00;
position: absolute; left:-25px;top: 100px;
}

箭頭，仍然是梯形和三角的拼接，異曲同工！

.Zui{
border: 50px solid red;
border-radius: 50px;
position: relative;
transform: rotate(-45deg);
}
.zui::after{
content: "";
width:50px;height: 50px;
background-color: #fff;
position: absolute;
}

大嘴，圓形拼接正方形（旋轉）

.DunPai{
width: 120px; height: 160px;
background-color: red;
border-radius: 80% 80% 80% 80% / 20% 20% 80% 80%;
}

盾牌，通過調整border-radius圓角的弧度而形成

.MsgBox{
width: 250px;min-height:40px;
border-radius: 15px;
background-color: #e00;
position: relative;left:20px;
padding:20px;color:#fff;font-size:24px;
}
.MsgBox::after{
content: "";
width: 20px;height: 20px;
background-color: #e00;
position: absolute; top:30px;left:-10px;
transform: rotate(-45deg);
}

聊天的氣泡，圓角矩形與正方形（旋轉45度）拼接

.Hua12{
width: 100px;height:100px;
background-color: #e00;
position: relative;left: 30px;
}
.Hua12::before,.Hua12::after{
content: "";
width: 100px;height: 100px;
background-color: #e00;
position: absolute;left:0;top:0;
}
.Hua12::before{transform: rotate(30deg);}
.Hua12::after {transform: rotate(60deg);}

大紅花！是3個正方形旋轉角度后拼接而成

.TaiJi{
width: 160px;height: 80px;
border-radius:50%;
border: #e00 solid;
border-width: 1px 1px 80px 1px;
position: relative;left: 30px;
}
.TaiJi::before,.TaiJi::after{
content: "";
width:20px;height: 20px;
border-radius:50%;
position: absolute;top:40px;
}
.TaiJi::before{
border:30px solid #e00;
background-color: #fff;
left:0px;
}
.TaiJi::after{
border:30px solid #fff;
background-color: #e00;
left:80px;
}

太極圖，這個我可是思考了半天才想出來的，他其實是3個圓圈組成，最技巧的地方在于如何只用一個圓形做出一半陰一半陽的效果來，先賣個關子，其實代碼里已經體現出來了，哈哈！

.SouSuo{
width: 80px;height: 80px;
border: 15px solid #e00;
border-radius:50%;
position: relative;
}
.SouSuo::after{
content: "";
width: 50px;height: 15px;
background-color: #e00;
transform: rotate(45deg);
position: absolute;top:80px;left:60px;
}

搜索符號，一個圓圈加一個矩形（旋轉45度）做手柄

.YueYa {
width: 80px; height: 80px;
border-radius: 50%;
box-shadow: 25px 25px 0px 0 red;
}

月牙，一個圓圈，外面加一個陰影，自然就形成了月牙狀！

.ShanXing{
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 100px solid red;
border-radius: 50%;
}

扇形，其實是一個邊框構成的倒三角，用border-radius弄出來圓弧后，就成了扇形

.ShiZi{
width: 80px; height: 80px;
box-shadow: 25px 25px 0px 0 red;
position: relative;
}
.ShiZi::after{
content: "";
width: 80px; height: 80px;
box-shadow: -25px -25px 0 0 red;
position: absolute;left:105px;top:105px;
}

紅十字，先用box-shadow弄出L形，再用兩個L形狀旋轉拼接而成

.Suo{
width:160px;height: 100px;
background-color: #e00;
border-radius: 20px;
position: relative;
}
.Suo::before{
content: "";
width:60px;height: 60px;
border:20px solid #e00;
border-radius: 100px 100px 0 0;
position: absolute;left:30px;top:-80px;
}
.Suo::after{
content: "";
width: 0px;height: 30px;
border:10px solid #fff;
border-radius: 20px;
position: absolute;left:70px;top:30px;
}

鎖，是3個矩形組合而成，1個矩形做鎖身，一個大圓角矩形做鎖環，一個小圓角矩形做鑰匙孔

.KuoHao{
width: 10px;height: 100px;
border: 10px solid #e00;border-right: 0;
border-radius: 20px 0 0 20px;
position: relative;left:50px;
}
.KuoHao::after{
content: "";
width: 20px; height: 20px;
transform: rotate(45deg);
box-shadow: -10px 10px 0px 0 #e00;
background-color: #fff;
position: absolute;left:-5px;top:40px;
}

大括號，是半拉圓角矩形（細長），疊加一個L形尖角構成。

好了，以邊框特性為核心生成幾何圖形的示例就到這里，主要還是以示范原理為主。實際使用中可以有更多、更巧妙的創意、更優化的代碼。

關于css生成幾何圖形，還有以clip-path為核心的剪切手法，以及以內聯SVG為核心的解決方案，我們后續另文再詳細講解，內容相信會更加精彩！

在線咨詢

上一篇：Medium是如何進行漸進式圖像加載的
下一篇：PHP 獲取網頁所有鏈接

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS繪制三角形—border法（詳例）

. 實現一個簡單的三角形

實現原理：

2. 實現帶邊框的三角形

3. 繪制其它角度的三角形

您的項目需求