CSS 实现尖角样式

CSS 实现尖角样式

实现思路

实现一个CSS的尖角样式 ，思路为 用两个尖角，我是用的是一个before一个div、将其放到指定的位置，一个小一点作为尖角另外一个大一点作为尖角的border。然后使用position定位以及负的margin将其定位上去即可代码如下。

实现代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body { /*  清除选择的颜色 */
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; 
            user-select: none;
        }
        .drop-list-btn{
            background:#41464b;
            box-shadow:0 4px 12px 0 rgba(0,0,0,0.20);
            border-radius:2px;
            width:168px;
            height:56px;
            margin: 0 auto;
            cursor: pointer;
        }
       .drop-list-btn span{
            font-family:PingFangSC-Medium;
            font-size:24px;
            color:#ffffff;
            letter-spacing:0;
            line-height:24px;
            text-align:center;
            display: inline-block;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 30px;
        }
        .drop-list{
            margin: 0 auto;
            background:#ffffff;
            border:1px solid #dddddd;
            box-shadow:0 4px 12px 0 rgba(0,0,0,0.10);
            border-radius:2px;
            width:249px;
            height:319px;
        }
        .drop-list-item{
            width:249px;
            height:64px;
        }
        .drop-list-item:hover{
            background:#f5f5f5;
        }
        .drop-list-item div{
            height: 100%;float: left;
        }
        .drop-list-item div:nth-child(1){
            width: 41px;
         }
        .drop-list-item div:nth-child(2){
            width: 40px;background: url(icons/docs@2x.png) no-repeat content-box center;
         }
         .drop-list-item div:nth-child(3){
            width: 23px;
         }
        .drop-list-item div:nth-child(4){
                font-family:PingFangSC-Regular;
                font-size:24px;
                color:#666666;
                letter-spacing:0;
                line-height:24px;
                text-align:left;
                width: 96px;
        }
        .drop-list-item div:nth-child(4) span{
                display: inline-block;top: 50%;transform: translateY(-50%);position: relative;
        }
       .drop-list::before {
                border-right: 13px solid transparent;
                border-bottom: 13px solid rgba(0,0,0,0.1);
                width: 0px;
                border-left: 13px solid transparent;
                content: '';
                margin-top: -13px;
                position: relative;
                top: -36px;  
                left: 119px;
        }
        .drop-list-triangle{ /*外面的三角形 底色用before*/
            border-right:12px solid transparent;border-bottom:12px solid white;width: 0px;border-left:12px solid transparent;margin-top:-12px;position: relative;left: 119.5px;top: -22px;
        }
    </style>
</head>
<body>


        <div class="drop-list-btn">
           <span>新建</span> 
        </div>
        <div class="drop-list" style="margin-top: 20px;">
           <div class="drop-list-triangle"  ></div>
            <div class="drop-list-item" >
                <div ></div>
                <div ></div>
                <div ></div>
                <div >
                    <span >文档</span>
                </div>
            </div>
             <div class="drop-list-item" >
                <div ></div>
                <div style="background: url(icons/chart@2x.png) no-repeat content-box center;"></div>
                <div ></div>
                <div >
                    <span >表格</span>
                </div>
            </div>
             <div class="drop-list-item" >
                <div ></div>
                <div style="background: url(icons/folder@2x.png) no-repeat content-box center;"></div>
                <div ></div>
                <div>
                    <span >文件夹</span>
                </div>
            </div>
            <div  style="width:249px;height: 3px;margin: 8px 0px;">
                <div style="border:1px solid #dddddd;width:190px;height:1px;position: relative;margin: 0 auto;"></div>
            </div>
             <div class="drop-list-item">
                <div ></div>
                <div style="background: url(icons/upload@2x.png) no-repeat content-box center;"></div>
                <div ></div>
                <div >
                    <span >导入</span>
                </div>
            </div>
        </div>


<script type="text/javascript">
    document.getElementsByClassName("drop-list-btn")[0].onclick = function (evt) {
        var ele = document.getElementsByClassName("drop-list")[0];
        if (ele.style.display=="none"){
            ele.style.display="block";
        }else{
            ele.style.display="none";
        }

    }
</script>
</body>
</html>

效果如下：