css实现小三角

最新推荐文章于 2022-04-01 16:02:53 发布

终是后来居上

最新推荐文章于 2022-04-01 16:02:53 发布

阅读量243

点赞数

文章标签： css

原文链接：https://www.cnblogs.com/monozxy/p/7903019.html

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<div class="box sanjiao_border">
    <!--ie6下需用，非ie6无需-->
    <i class="before"></i><i class="after"></i>
</div>

.sanjiao_border:before,.sanjiao_border .before{/*.before为ie6下用到*/
    content: ''; /*伪类下的属性*/
    display:block;
    position:absolute;
    top:0px;
    left:150px;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border:10px;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent #f30 transparent;
}
.sanjiao_border:after,.sanjiao_border .after{/*.after为ie6下用到*/
    content: '';/*伪类下的属性*/
    display:block;
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border:9px;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent #fff transparent;
    position:absolute;
    left:151px;
    top:2px;
}