好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

纯CSS实现小三角提示信息_html/css_WEB-ITnose

实现后的效果如下:


不带边框的


带边框的

在此提供两种实现方式:

1、不带边框的

css:

*{margin:0;padding:0;}        body{            background:#666;            font:14px/20px "Microsoft YaHei";            text-align: left;        }        .entry{            position: relative;            margin-left: 20px;            margin-top:20px;            width:200px;            background:#fff;            padding:10px;            /*设置圆角*/            -webkit-border-radius:5px;            -moz-border-radius:5px;            border-radius:5px;        }        /*左三角*/        .entry-trangle-left{            position:absolute;            bottom:15px;            left:-10px;            width:0;            height:0;            border-top:15px solid transparent;            border-bottom:15px solid transparent;            border-right:15px solid #fff;        }        /*右三角*/        .entry-trangle-right{            position:absolute;            top:15px;            right:-10px;            width:0;            height:0;            border-top:15px solid transparent;            border-bottom:15px solid transparent;            border-left:15px solid #fff;        }        /*上三角*/        .entry-trangle-top{            position:absolute;            top:-10px;            left:20px;            width:0;            height:0;            border-left:15px solid transparent;            border-right:15px solid transparent;            border-bottom:15px solid #fff;        }        /*下三角*/        .entry-trangle-bottom{            position:absolute;            bottom:-10px;            left:20px;            width:0;            height:0;            border-left:15px solid transparent;            border-right:15px solid transparent;            border-top:15px solid #fff;        } 

html:

查看更多关于纯CSS实现小三角提示信息_html/css_WEB-ITnose的详细内容...

  阅读:35次