css设置三角形
1.在開發中，有時候會用到一些小三角形來強調或者標記元素，這樣以便區分不同的項目，然后把三角形繪制成一個比較明顯的顏色，就達到效果了，那怎么才能畫出三角形呢，之前我也不清楚，最近看到了有些網頁在使用，在進行標記的時候，都是使用的是背景圖片進行標記，這樣在網頁顯示的時候，感覺有點生硬，畢竟圖片的加載沒有css加載那么順暢
下面看一段代碼：這里設置了一個span 元素為塊級元素，分別設置border的四邊都為不同的顏色：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100%;margin: 50px 0;text-align: center;}span {position: relative;margin: 0 auto;display: block;width: 50px;height: 50px;border-style: solid;border-width: 50px;border-top-color: red;border-left-color: blue;border-bottom-color: yellow;border-right-color: black;}</style> </head> <body><div class="as">如何設置三角形?</div><div class="jindaobox"><span class="sanjiao"></span></div> </body> </html>運行結果：發現四面的邊框，居然是這種梯形的結構，如果把梯形上底變為0，不就是我們想要的三角形了么，而且這是使用html 和css做不來的，不存在使用靜態頁面就可以實行，不存在圖片的不連續顯示問題；
接下來就是把梯形的上底變為0
上底變為0 很簡單，只要把元素的高和寬設置為0就可以了
width:----->0 得到上下兩種箭頭
height:------->0 得到左右兩種箭頭
1.當我們想要上箭頭的時候，就把元素的左右邊框和下邊框去掉
2.當我們想要下箭頭的時候，就把元素的左右邊框和上邊框去掉
3.當我們想要左箭頭的時候，就把上下邊框和右邊框去掉
4.當我們想要右箭頭的時候，就把上下邊框和左邊框去掉
想法是很好，但是不行，那我們換個方法：既然設置寬度不行，那我們就設置顏色吧，只要把上，左，右邊框的顏色設置為透明的，不就可以了么，css 中，剛好有一個設置顏色為透明的值
span {position: relative;margin: 0 auto;display: block;width: 0px;height: 0px;border-style: solid;border-width: 50pxborder-top-color: transparent;border-left-color: transparent;border-right-color: transparentborder-bottom-color: yellow;}設置下箭頭：
span {position: relative;margin: 0 auto;display: block;width: 0px;height: 0px;border-style: solid;border-width: 50px;border-bottom-color: transparent;border-left-color: transparent;border-right-color: transparentborder-top-color: red}設置左箭頭：
span {position: relative;margin: 0 auto;display: block;width: 0px;height: 0px;border-style: solid;border-width: 50px;border-top-color: transparent;border-bottom-color: transparentborder-right-color: transparent;border-left-color: blue;}
設置右箭頭：
當然，css 還可寫在一起，這樣看起來要簡單一些：
以上，是使用html和css兩項綜合起來設置的箭頭，可以不可以再設置簡單一點呢？
下面，我采用class 屬性來設置箭頭，當需要箭頭的時候，直接加上這個class 屬性就可以，當不想要箭頭的時候，去除調這個類就好了
下面來看一個例子：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100%;margin: 50px 0;text-align: center;}.jindaobox {position: relative;width: 980px;margin: 20px auto;}li {list-style: none;float: left;position: relative;border: 1px solid #eee;margin-right: 30px;padding: 10px 20px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;}.active {border: 1px solid red !important;}.active::after {position: absolute;content: "";height: 0;width: 0;border: 8px solid transparent;border-top-color: red;top: 0;left: 0;right: 0;margin: auto;}</style> </head><body><div class="as">請選擇你喜歡的電影</div><ul class="jindaobox"><li class="lis">飛龍在天</li><li class="lis active">紫川</li><li class="lis">封神演義</li><li class="lis active">風云第一刀</li><li class="lis">天外飛仙</li></ul></body></html>
這樣，就實現了使用class 屬性控制箭頭的方式，當需要選中時，給li 元素加上一個active class 屬性即可，當不需要時，就去除active class 屬性
文章來源http://www.cnblogs.com/huanying2015
總結
- 上一篇： IDEA设置方法自动显示参数提示
- 下一篇： 前后端分离 集群负载均衡 分布式