校園招聘的筆試題目中也有一道題目要求利用
css來繪出乙個帶三角矩形。如圖所示。
在css
中，三角形是採用盒子模型的
border
屬性來繪製的。所以在進行上圖繪製之前有必要回顧一下
css盒子模型。
css盒子模型同一方向共有四個屬性，比如橫向有
margin
，border
，padding
，width
。其中width
指定內容區域的寬度，
margin
和padding
為內外邊距，外邊距表示盒與盒之間的距離，內邊距表示內容距離
border
的距離，
border
表示邊框的寬度。
css盒模型的
border
屬性如圖所示，它是由上右下左四個梯形構成。
在上圖中將width
和height
屬性都設定為
0px，就可以得到乙個由四個三角形組合而成的矩形，如圖。
到此時就可以得到乙個三角形了，只需要將其餘邊框的顏色設定為白色或者透明，為了具有很好的擴充套件性，本文將其設定為透明，即border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;
得到如圖所示三角形。
到此時，已經不難想象到最初的帶三角矩形邊框如何得到了，可以將其分解為三個過程。如圖。
按照這三個過程，很容易想到使用3個
divdiv
，所以這裡需要使用
css偽元素。詳細**如下：
css 純 css 製作帶三角（border篇）
以前寫過一篇純css製作帶三角的邊框 那篇文章是用html特殊字元來製作三角的，今天介紹下，如何用 border 來製作三角。html 如下 div class arrow up div div class arrow down div div class arrow left div div cl...
css 純 css 製作帶三角的邊框
首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全 通過特殊字元 利用 css 中的 margin 或者 position 方法完全可以實現以上效果。doctype html html lang en us ...
用css製作三角形
用css製作三角形，主要是利用css元素給 盒模型 設定邊框得到的。上圖，上邊框和做邊框，以及上邊框和右邊框的交合處，瀏覽器會按照直角的二分之一處繪製交合線。這是 盒模型 有寬和高時候的效果。我們假設一下，如果把寬和高設定成0px，同時讓邊框的寬度更寬一點情況會怎樣那？css 如下 tip1效果圖如...