CSS 了解transparent,用transparent透明实现箭头绘制

transparent 是透明色，是系统默认的颜色

箭头绘制主要利用一个空元素，设置其边框为transparent，然后利用边框不同顶部的颜色达到显示箭头的目的

    .banner { 
            width: 0px;
            height: 0px;
            /* 默认的背景颜色-透明 */
            background-color: transparent;
            margin: auto;
            border: 30px solid red;
            /* 上 */
            border-color: red transparent transparent transparent;
            /* 右 */
            border-color: transparent red transparent transparent;
            /* 下 */
            border-color: transparent transparent red transparent;
            /* 左 */
            border-color: transparent transparent transparent red;
    }


<div class="banner"></div>

其他都是透明色，只有一块是红色，因而实现透明箭头的绘制。

绘制其他形状

    .nav {