乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這個效果。首先想到的就是用元素的偽類來實現。
首先想到的是給小三角加乙個box-shadow屬性，問題就可能很輕鬆的解決了，可是問題往往沒有那麼簡單。
box-shadow只加在border外邊緣，跟我們想要的真的是差太多。仲麼辦呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),變成兩個菱形，然後對底下的元素加box-shadow，然後用後面的元素覆蓋底下的元素。**如下：
>小三角帶邊框帶陰影的div——css實現效果
title
>
9<
style
>
10.box2
2526
.box2:before,
27.box2:after
4142
.box2:before
4647
.box2:after
51style
>
52head
>
5354
<
body
>
55<
div
class
="box2"
>
div>
56body
>
5758
html
>
css實現帶小三角形的邊框
主要方法是使用偽元素before和after，之前已經總結過偽元素before after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角 原理圖 第一步 第二步 設定浮動，讓before和after三角形...
css實現小三角
其實早都做過用css來實現小三角的箭頭符號了，不過一直都沒靜下心來仔細研究，今天正好多看了些，都說好記性不如爛筆頭，把所了解到的趕緊記錄下來。大致有兩種方法 邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角 字元法就是採用菱形的字元 然後決定定位把多餘的部分溢位掉，該種方法只適合三角和...
css3實現小三角
利用css3的新特性可以完成很多圖形的構建，下面演示如何利用border的特性構建乙個小三角。我們首先新建乙個div，給這個div設定class demo 然後給demo設定如下屬性 demo顯示效果是這樣的 可以看到四個不同顏色的三角形連在一起。我們只想要乙個，比如向上的紅色三角形，怎麼辦，那就是...