css实现三角形尖角箭头的实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        .area {
            margin:100px auto;
            width:500px;
            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;
        }
        #triangle-up {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 40px solid red;
        }
        #triangle-down {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 40px solid red;
        }
    </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>
    <span id="triangle-up"></span>
    <span id="triangle-down"></span>
</div>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css实现三角形尖角箭头的实例

赞 (0)
分享到:更多 ()

发表评论 0