在實(shí)際編程中我們經(jīng)常會(huì)遇到下拉菜單的下三角和一些特殊的圖形辽剧，那么這些如何用css來(lái)實(shí)現(xiàn)呢传货？
例1
例2
例3
原理：
仔細(xì)想想密似，原理非常簡(jiǎn)單劫樟，利用CSS的border以及它的屬性值transparent來(lái)實(shí)現(xiàn)三角形,其中最主要的是要明白由于div的高度跟寬度都為0吗垮，margin垛吗，padding也為0，所以元素框的大小就是他的border的疊加烁登，由于相鄰border會(huì)重疊怯屉，故存在內(nèi)容寬高時(shí)其實(shí)任意一邊存在的border都是梯形的，當(dāng)div內(nèi)容寬高為0時(shí)饵沧，border就表現(xiàn)為三角形锨络，將四個(gè)border的顏色設(shè)置為transparent表示邊框透明，而將右邊框顏色再設(shè)置為紅色就發(fā)現(xiàn)三角形出現(xiàn)了狼牺，其實(shí)這個(gè)三角形是你設(shè)置顏色的邊框羡儿。
<style>
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
展示結(jié)果：
如果想要不同方向的三角形，只需要改變所需的邊框顏色是钥，另外三條邊改為transparent(透明)掠归。那么我們就能很簡(jiǎn)單的實(shí)現(xiàn)例1和例3的效果
一些不規(guī)則的三角形只需要改變邊框的寬度就可以得到不同形狀的三角形
<style>
div{
width: 0px;
height: 0px;
border-width: 0px 0px 200px 100px;
border-style: solid;
border-bottom-color:green ;
border-left-color:transparent;
}
</style>
</head>
<body>
<div></div>
</body>
展示結(jié)果：
