純CSS畫三角形，深度解析原理/思維擴充套件
阿新 • • 發佈：2019-02-06
概述：用純css畫一些簡單的圖形，如三角形/梯形/其他
實現原理：通過對一個div新增邊框，設定邊框寬度，顏色
一個最簡單的demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.shape{
width:0;
height:0;
border:20px solid;
border-color:transparent transparent gray transparent}
</style>
</head>
<body>
<div 效果圖
盒子模型
解析看到這裡可能還不是很直白，那我們把這個盒子的所有邊框都顯示出來，一目瞭然，修改一下邊框的樣式就行了
<style type="text/css">
.shape{
width:0;
height:0;
border:20px solid;
border-color:blue green gray red}
</style>在看一看這個盒子效果圖
關鍵技術：現在很容易看明白這個三角形是怎麼出生的了，通過設定div的寬高和邊框寬度，硬生生的擠壓出一個三角形，然後把其他三個方位的邊框隱藏掉，三角形就出來了，有沒有一種恍然大悟的感覺？
舉一反三：①如果我想畫一個梯形怎麼做？
<style type="text/css">
.shape{
width:10px;
height:0;
border:20px solid;
border-color:transparent transparent red transparent}
</style>②郵箱形
<style type="text/css">
.shape{
width:10px;
height:0;
border:20px solid;
border-color:green blue red pink 
結尾：更多純CSS圖形