border-right:50px solid purple }
</style>
<div class="triangle"></div>
以上代码将会在页面上展示一个正方形，左边是个红色的三角形，右边是紫色的三角形，上面是黑色的三角形，下面是蓝色的三角形。那么有人就会问，我们要的不是三角形么？野兽你画个正方形逗我呢？
我们对上面的样式做些修改：
CSS Code复制内容到剪贴板
.triangle{
width: 0;
height: 0;
border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px，transparent表示边框颜色是透明的，solid表示边框是实线的*/
border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色，众所周知，css后面的样式代码会覆盖之前的相同的样式代码，至于其他三边的还是透明色*/
/*border-bottom-color: black; /*这里设置底部边框色为黑色*/
border-left-color: black; /*这里设置左边边框色为黑色*/
border-right-color:black*/ /*这里设置右边边框色为黑色*/
}
然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。
接下来我们加上:before：
CSS Code复制内容到剪贴板
<style>
.test-div{
position: relative; /*日常相对定位*/
width:150px;
height:36px;
border-radius:5px;
border:black 1px solid;
background: rgba(245,245,245,1) }
.test-div:before{
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
display: block;
