利用css中的border属性创建一个类似正方形缺失一角及带边框三角形的效果

最近研究了下css中的border属性，觉得功能很强大，可以制作各种三角形，正好设计有需求，于是就写了一个CSS效果。代码如下：

css样式部分：

<style>
    body{
        background:#f2f2f2;
    }
    .border{
        position: relative;
        margin-top:300px;
        margin-left:200px;
        width:200px;
        background:white;
        height:200px;
        border:1px solid #d9d9d9;
    }
    .border:after{
        position:absolute;
        bottom:-1px;
        right:-1px;
        content: "";
        border-left:50px solid transparent;
        border-bottom: 50px solid #d9d9d9;

    }
    .borderInner{
        position:absolute;
        bottom:-1px;
        z-index:2;
        right:-1px;
        border-left:48.5px solid transparent;
        border-bottom: 48.5px solid #f2f2f2;

    }
    .a1{
        position:absolute;
        bottom:-1px;
        z-index:3;
        right:-1px;

    }
    .triangle_left{
        width:0;
        height:0;
        border-width:0 0 40px 40px;
        border-style:solid;
        border-color:transparent transparent #d9d9d9 ;
        position:relative;
    }
    .triangle_left .triangle_left_span{
        display:block;
        width:0;
        height:0;
        border-width:0 0 38px 38px;
        border-style:solid;
        border-color:transparent transparent white;
        position:absolute;
        top:1px;
        left:-38px;
    }
    .borderLeft{
        height:38px;
        width:0;
        border-right:1px solid #d9d9d9;
        position:absolute;
        top:1px;
        left:-1px;
        z-index:20;
    }
</style>

页面标签部分如下：

<div class="border">
    <div class="borderInner">
    </div>

    <div class="a1">
        <div class="triangle_left">
            <span class="triangle_left_span"></span>
            <div class="borderLeft"></div>
        </div>
    </div>

</div>