css实现小三角样式

最新推荐文章于 2024-06-19 14:48:22 发布

沄莲0621

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量849

点赞数

分类专栏：前端开发文章标签： css 小三角

前端开发专栏收录该内容

10 篇文章 2 订阅

订阅专栏

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

<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 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了。

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

沄莲0621

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现小三角样式

这次在开发中，想用图标小三角来说明功能，可是又不想使用图片，就在网上找了不少的文章，结果发现下面这段代码是可行的，发出来，仅供大家参考：&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;请选择身份...
复制链接

扫一扫