一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2022-06-25 10:08:14 编辑:袖梨 来源:一聚教程网

效果如下图所示

 

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",反对的方向为三角形高度颜色为三角形颜色,其它两个方向相加为宽度
   


热门栏目