思路是將2個三角形疊加起來，外層的三角形稍微大一些。
思路和《【css】內圓角》這個筆記的 「方法一」 類似。
這個筆記最後會補充《【css】畫三角形》這個筆記裡記漏的一點。
html**：
.parent
.child
逐步分析：
css：
.parent
.child
之所以會出現這種情況，是因為內層巢狀的元素，會在外層元素的正式內容部分開始出現。看看下面的盒子模型。
巢狀的內容，都會從黃色框（content）的左上角開始出現。
再看下圖：
根據紅色的指示線可以看得出，黃色三角形左邊的角和黑色三角形上面的角是在同一水平線上的。所以黃色三角形（巢狀的）應該向左移動。
向左移動距離 = 黃色三角形border的值。
左負 右正
向下移動距離 = （黑border - 黃border）/ 2 +1
上負 下正
最後回顧一下border的用法
border可以一次設定4條邊的所有屬性，
如：border: 1px solid #eee;
這就把4條邊都設定成1畫素的實線，且顏色為灰色。
可以把所有屬性分開設定，
如：border-width: 10px;
這就把4條邊都設定成10px。
可以分別設定4條邊同一屬性的不同值，並寫在同一行**裡。
如：border-width: 1px 2px 3px 4px;
對應是順序是：上 右 下 左
如果只設定兩個值，如：
border-width: 1px 3px;
對應：上下 左右
如果只設定三個值，如：
border-width: 1px 2px 3px;
對應：上 左右 下。
即：上 1px 左右 2px 下 3px
css實現帶小三角形的邊框
主要方法是使用偽元素before和after，之前已經總結過偽元素before after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角 原理圖 第一步 第二步 設定浮動，讓before和after三角形...
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...