利用CSS製作三角形

我們一般都會想，哎，這還不簡單，用一張就可以了。

如何用css也作出這樣的效果。

首先，我們來定義乙個div:

然後給它增加一些樣式：

.up結果如圖：

你tm逗我呢，這明明是正方形好嗎！

好好好，別急，放下你手中的磚頭，我們不妨設定一下它的邊框。

.up然後就變成這樣：

你這是在找死

好的好的，別急，我說最後一句：

我們嘗試著把它的四個邊框的顏色改成不一樣。

.up結果如下：

好像有點意思

好的，別急，我們再嘗試著把div的寬度和高度都設定為0；

.up結果：

好的，我們得到了四個三角形，

現在，我們要得到方向指向上的那個藍色的三角形，所以我們把其他三角形的背景顏色設定成透明的，並且去掉之前設定的背景顏色：

好的 ，掌聲在**？

我知道你想說什麼，我們仔細觀察，發現其實上邊框是不必要的，因為它不影響我們下面的那個三角形的大小和形狀，所以我們去掉上邊框，然後再調整一下背景顏色：

完成了。

按照這種方法，我們可以製作四個方向上的三角形：

完整的**：

html：

1

<
div 
class
="up"
>
div>
2<
div 
class
="right"
>
div>
3<
div 
class
="down"
>
div>
4<
div 
class
="left"
>
div>

1

.up,.right,.down,.left
7.up
12.right
17.down
22.left

來自為知筆記(wiz)

利用css製作三角形

學習前端過程中，遇到小小難點 下拉框，在此記錄一下。下面是利用css製作乙個三角形 box效果就是這樣 可以通過調節border改變三角形的大小。然後，做乙個簡單的下拉框，可以使用到這個三角形 box1 box1 ul a box1 ul li box1 ul li hover box1 ul li...

css製作三角形

div html css circle 結果 總結 在製做圓形之前，首先需要保證這個元素是正方形，即width height 其次border radius 1 2width即可 border radiusde 的預設基準點是幾何中心 下面即將步入我們今天所說的正題 css製作三角形 首選css製作...

css 製作三角形

1.寫乙個盒子，寬高必須為0 2.根據自己所要三角形的方向，乙個邊界設定顏色，顯示三角效果 3.其它3邊界設定相同顏色 一般設定白色 就顯得設定不同顏色的那一邊是個三角 div生成三角結果如下 可以看到生成的三角是等邊三角型，若我們向設定其它想要的三角形，就需要對三角形做一些強化修改，乙個場景如下 ...