yunlian0621 阅读(62) 评论(0)

这次在开发中,想用图标小三角来说明功能,可是又不想使用图片,就在网上找了不少的文章,结果发现下面这段代码是可行的,发出来,仅供大家参考:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>请选择身份入口</title>
    <style type="text/css">
        .area {
            margin:100px auto;
            width:300px;
            height: 150px;
        }
        .item {
            float:left; clear:both;
            margin-bottom:23px;
        }
        /* 向上的箭头 */
        .dot-top {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-top-width: 0;
            border-style: dashed;
            border-bottom-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /* 向右的箭头 */
        .dot-right {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-right-width: 0;
            border-style: dashed;
            border-left-style: solid;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /* 向下的箭头 */
        .dot-bottom {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-bottom-width: 0;
            border-style: dashed;
            border-top-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /* 向左的箭头 */
        .dot-left {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-left-width: 0;
            border-style: dashed;
            border-right-style: solid;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
    </style>
</head>

<body>
<div class="area">
    <span class="item dot-top"></span>
    <span class="item dot-right"></span>
    <span class="item dot-bottom"></span>
    <span class="item dot-left"></span>
</div>
</body>
</html>

 四个方向的三角形图标都有了。

可以通过设置 border-width 来调整箭头的大小,这样就不需要每次都去做图了,非常方便,颜色可以随时调整,真佩服那位大神,以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头,太厉害了。

效果图,可以参考附件图片