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

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

方法一

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


<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> 

这里写图片描述

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

方法二:

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


<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> 

这里写图片描述

你可能感兴趣的:(web前端,CSS3)