html 倒三角制作,css倒三角制作,css倒三角的原理
前段時(shí)間,有人問(wèn)下面這個(gè)圖的效果,怎么用css做出來(lái),不用CSS3,兼容到IE7:
我起初也一頭霧水,后來(lái)看到一個(gè)類(lèi)似的案例,才恍然大悟。我們都知道,css的每條邊相交的地方,都是三角,如果,將容器的寬高,設(shè)置為0,而邊框非常粗,并且每條邊顏色不同,就會(huì)得到下面的效果:
css代碼:
.test{
width:0px;
height:0px;
border:100px solid red;
border-top-color:red;
border-bottom-color:blue;
border-right-color:orange;
border-left-color:black;
}
html代碼:
如果將其中三條邊的透明度設(shè)置為0,即,將上面的代碼的三條邊改成:
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
那么就會(huì)得到下面的效果:
三角形已經(jīng)出來(lái)了,那么想實(shí)現(xiàn)一開(kāi)始的效果,就簡(jiǎn)單了,即再做一個(gè)比這個(gè)邊框細(xì)一點(diǎn)的三角形,邊框顏色為白色,蓋在這個(gè)倒三角的上面,就能實(shí)現(xiàn)了,而且,兼容性非常好,效果圖:
作者:舒小羽
鏈接:https://www.jianshu.com/p/d76ab0d19f0c
總結(jié)
以上是生活随笔為你收集整理的html 倒三角制作,css倒三角制作,css倒三角的原理的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: IOS
- 下一篇: java判断车牌号,包含新能源