生活随笔
收集整理的這篇文章主要介紹了
css 漏斗图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼塊
<style
>.top1
{width:400px
;border
-top
: 40px solid skyblue
;border
-right
: 100px solid transparent
;border
-left
:100px solid transparent
;}.top2
{width:140px
;border
-top
: 40px solid #fbb6e7
;border
-right
: 130px solid transparent
;border
-left
:130px solid transparent
;margin
-left
: 100px
;}.top3
{width:140px
;height:30px
;background
-color
: #5981F0
;margin
-left
: 230px
;}.top4
{width:140px
;height:30px
;background
-color
: orchid
;margin
-left
: 230px
;}.top5
{width:140px
;height:30px
;background
-color
: aqua
;margin
-left
: 230px
;}
</style
>
<body
><div
class="top1"></div
><div
class="top2"></div
><div
class="top3"></div
><div
class="top4"></div
><div
class="top5"></div
>
</body
>
效果圖
總結
以上是生活随笔為你收集整理的css 漏斗图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
