丝带导航

结构：

<div class="ribbonBox">
    <div class="ribbon">丝带导航</div>
    <div class="content">这里是内容~</div>
</div>

样式：

.ribbonBox{
            width:300px;
            height:200px;
            background:#888;
            box-shadow: 5px 5px 5px 10px #eee;
            margin:150px auto;
            border-radius: 5px;
            position:relative;
        }
        .ribbon{
            width:100px;
            height:40px;
            line-height:40px;
            background:#EDBA19;
            position:relative;
            left:50%;
            margin-left:-50px;
            top:-10px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
            text-align:center;
        }
        .ribbon:before{
            content:"";
            width:0;
            height:0;
            border-bottom:10px solid #cd8d11;
            border-left:10px solid transparent;
            position:absolute;
            left:-10px;
            top:0;
        }
        .ribbon:after{
            content:"";
            width:0;
            height:0;
            border-bottom:10px solid #cd8d11;
            border-right:10px solid transparent;
            position:absolute;
            right:-10px;
            top:0;
        }

效果图：

 

转载于:https://www.cnblogs.com/ly-qingqiu/p/10451572.html