CSS3伪类实现矩形四个切角

效果图如下

原理：给伪类添加背景利用线性渐变实现，然而背景渐变一次只能实现一个切角，因此，上图其实是由4个不同方向上的的背景实现的。

代码实现

<div class="corner"></div>

.corner{
            width: 300px;
            height: 300px;
            background:
                    linear-gradient(135deg, transparent 15px, deeppink 0)
                    top left,
                    linear-gradient(-135deg, transparent 15px, deeppink 0)
                    top right,
                    linear-gradient(-45deg, transparent 15px, deeppink 0)
                    bottom right,
                    linear-gradient(45deg, transparent 15px, deeppink 0)
                    bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }

分析：linear-gradient(135deg, transparent 15px, deeppink 0) top left中135deg指的是渐变发生在左上角，关于这个角度问题不明白了可参考下面这篇讲折角的博客，事实会让你明白：
http://blog.csdn.net/u012657197/article/details/75321796
接着 transparent 指的是以透明颜色开始渲染15px，deeppink 0这里的0指的是从15px开始处用deeppink渲染剩下的区域。而剩下的区域是那些呢？由于设置以下代码：

background-size: 50% 50%;
background-repeat: no-repeat;

即背景占1/4大下且不重复，而top left即设置background-position，所以渲染出来的区域就是效果图的左上角1/4处。