css3右下小三角样式

在CSS3中，我们可以通过伪元素:after或:before来添加一些装饰性的样式，比如说右下小三角。下面我们就来学习如何用CSS3样式来实现右下小三角的效果。

/*先定义一个Box*/
.Box{
    position:relative;
    width: 200px;
    height: 200px;
    background-color:#f4f4f4;
}

/*然后定义伪元素*/
.Box:after{
    content:"";
    position: absolute;
    top:100%;
    right:20px;     /*右下角离右边的距离，可以自行调整*/
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f4f4f4;
}

/*这里加个clearfix方便看效果*/
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

以上代码中，我们首先定义了一个.Box元素，然后在.Box元素的后面添加了一个伪元素:after。接着我们通过position属性让伪元素的位置是相对于.Box元素的，然后定义了伪元素的宽高以及边框样式，这里用到了三角函数的知识。最后加了一个clearfix，防止布局混乱。

这时候我们就成功实现了一个CSS3右下小三角的样式。你可以根据实际情况自由调整样式，比如改小三角的大小、颜色等等。