css三角形的实现

实底三角形：

<html>
<head>
<title></title>
<style type="text/css">

a{
display: block;
width: 0;
height: 0;
border-left: 50px solid transparent;  /*左边框实现透明;50ppx是三角形左边框的宽度*/
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>

透明三角形：

原理：用俩个三角形进行叠加

<html>
<head>
    <title></title>
    <style type="text/css">

    a:before{
        top:0;
        left:0;
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;

        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid red;
    }
    a:after{
        top:1px;
        left:2px;
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-left: 48px solid transparent;
        border-right: 48px solid transparent;
        border-bottom: 48px solid #fff;
    }
    a{
        position: relative;
    }
    </style>
</head>
<body>
    <a href="">1111</a>
</body>
</html>