css实现圆角三角形例子(无图片)

作者：袖梨 2022-06-25

效果如下图所示

 

css实现圆角三角形例子(无图片)


三角形所对方向"width: 0"，
反向为三角形高度(20)"border-"，
反向颜色为三角形颜色"border-color: #eee"，
其它两个方向相加为三角形宽度(30)"border-"
CSS:

 代码如下 复制代码

span {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 15px 20px 15px;
    border-style: solid;
    border-color: transparent transparent #eee transparent;
    top: -20px;
    left: 50%;
    margin-left: -15px;
}

例子

 代码如下 复制代码


www.111com.net

    随心所欲的三角形
   


   


       
        三角形所对方向"width: 0"，反对的方向为三角形高度颜色为三角形颜色，其它两个方向相加为宽度
   


相关文章

精彩推荐