CSS技巧（一）——before、after实现带三角边框

概述

From now on，写一些CSS的书写技巧，本文是第一讲。

效果

右

左

上

下

实现代码

        .cssTest-right, .cssTest-left, .cssTest-top, .cssTest-bottom{
            float:left;
            width:200px;
            height:200px;
            border:2px solid red;
            position:relative;
            left:20px;
            top:20px;
            margin-left: 60px;
            border-radius: 4px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
        }
        .cssTest-right:before, .cssTest-right:after,
        .cssTest-left:before, .cssTest-left:after,
        .cssTest-top:before, .cssTest-top:after,
        .cssTest-bottom:before, .cssTest-bottom:after{
            content:"";
            border:20px solid red;
            width:0;
            height:0;
            position:absolute;
        }
        .cssTest-right:after, .cssTest-left:after,
        .cssTest-top:after, .cssTest-bottom:after{
             content:"";
             border:20px solid #ffffff;
             width:0;
             height:0;
             position:absolute;
         }
        .cssTest-right:before, .cssTest-right:after,
        .cssTest-left:before, .cssTest-left:after{
            border-top-color:transparent;
            border-bottom-color:transparent;
            top:calc(50% - 20px);
        }
        .cssTest-right:before{
            border-right-color:transparent;
            left:calc(100% + 1px);
        }
        .cssTest-left:before{
            border-left-color:transparent;
            right:calc(100% + 1px);
        }
        .cssTest-right:after{
            border-right-color:transparent;
            left:calc(100% - 1px);
        }
        .cssTest-left:after{
            border-left-color:transparent;
            right:calc(100% - 1px);
        }

        .cssTest-top:before, .cssTest-top:after,
        .cssTest-bottom:before, .cssTest-bottom:after{
            border-left-color:transparent;
            border-right-color:transparent;
            left:calc(50% - 20px);
        }
        .cssTest-top:before{
            border-top-color:transparent;
            bottom:calc(100% + 1px);
        }
        .cssTest-bottom:before{
            border-bottom-color:transparent;
            top:calc(100% + 1px);
        }
        .cssTest-top:after{
            border-top-color:transparent;
            bottom:calc(100% - 1px);
        }
        .cssTest-bottom:after{
            border-bottom-color:transparent;
            top:calc(100% - 1px);
        }

---

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	[email protected]
webgis群	1004740957
Android群	337469080
GIS数据可视化群	458292378

LZUGIS