箭头小三角（向上或向下、两条边）--两种制作方法

最新推荐文章于 2024-05-20 16:18:49 发布

秋天1014童话

最新推荐文章于 2024-05-20 16:18:49 发布

阅读量1w

点赞数 1

分类专栏： web前端 CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/53089332

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

网站中不论是导航还是下拉，往往有些小三角，制作方式有几下几种：

方法一

主要思想：使用一个矩形，盖住一个菱形的上半部分，则显示下三角；盖住下半部分，则显示上三角。主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小三角</title>
    <meta content="主要思想：使用i和s标签，i为矩形框，s为菱形(输入法，软键盘的特殊符号）,i覆盖s，盖住菱形上半部分，则显示下三角；调整定位的top值，即可显示上三角" >
    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .fl{
            float: left;
        }
        i,s{
            font-weight: normal;
            font-style:normal;
            text-decoration: none;
        }
        .header{
            height: 30px;
            line-height: 30px;
            background-color: #f1f1f1;
        }
        .header .banxin{
            width: 980px;
            margin: 0 auto;
        }
        .header .banxin .sendArea{
            display: inline-block;
            padding: 0 25px 0 15px;
            background-color: pink;
            position: relative;
        }
        .header .banxin .sendArea i{
            display: inline-block;
            width: 15px;
            height: 7px;
            background-color: yellow;
            position: absolute;
            top:12px;
            right:5px;
            overflow: hidden;
        }
        .header .banxin .sendArea i s{
            font: 400 15px/15px "宋体";
            position: absolute;
            top:-6px;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="banxin">
            <div class="sendArea fl">
                送至范围：杭州<i><s>◇</s></i>
            </div>
        </div>
    </div>

</body>
</html>

这里写图片描述

注：特殊符号为空菱形◇，则为两条边的小三角。
将特殊符号改为实体菱形◆，则为实体小三角。比较灵活，但需要输入法的软键盘帮助！

方法二：

主要思想：两个三角(三角的制作方法可参考下一篇-实体小三角)，①号三角为背景颜色，②号三角为箭头颜色，①号盖住②号，露出一个角。主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝三角</title>
    <!-- 主要思想：两个三角叠加，上面的为白色，盖住红色，露出一个小三角 -->
    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .fl{
            float: left;
        }
        i,s{
            font-weight: normal;
            font-style:normal;
            text-decoration: none;
        }
        div.banxin{
            width:980px;
            height:30px;
            margin:0 auto;
            background-color: #f1f1f1;
        }
        /*以上为基本设置和版心设置*/

        div.content{
            height:30px;
            line-height: 30px;
            background-color: pink;
            padding: 0 25px 0 10px;
            position: relative;
        }
        div.content b{
            display: inline-block;
            height: 0;
            width: 0;
            border-width:8px;
            border-color: red transparent transparent transparent;
            border-style: solid dashed dashed dashed;
        }
        div.content .one{
            border-color: pink transparent transparent transparent;
            position: absolute;
            top:10px;
            right:5px;
            z-index:1;
        }
        div.content .two{
            position: absolute;
            top:11px;
            right:5px;
        }
    </style>
    <script>    

    </script>
</head>
<body>
    <div class="banxin">
        <div class="content fl">
            我是向下的小箭头，只有两条边哦
            <b class="one"></b>
            <b class="two"></b>
        </div>
    </div>
</body>
</html>

这里写图片描述

秋天1014童话

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
箭头小三角（向上或向下、两条边）--两种制作方法

网站中不论是导航还是下拉，往往有些小三角，制作方式有几下几种：方法一主要思想：使用一个矩形，盖住一个菱形的上半部分，则显示下三角；盖住下半部分，则显示上三角。主要代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小三角</title> <meta content="主要思想
复制链接

扫一扫

专栏目录