html实现上下箭头

图片
0 447
haha 2018-1-25发布
签名:欢迎访问徕问社区!

1、Div的宽高为100

<!DOCTYPE html>
<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">
        div
        {
            border-color: green blue red black;
            border-style: solid;
            border-width: 16px;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示效果:

2、将宽高均设置为0

 

   <!DOCTYPE html>
<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">
        div
        {
            border-color: green blue red black;
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

显示效果:

 

3、只显示下面的▲

  • 半透明示意

<!DOCTYPE html>
<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">
        div
        {
            border-color: rgba(0,100,100,0.1) rgba(20,20,20,0.1) red;
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示效果:

  • 设置为全透明

<!DOCTYPE html>
<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">
        div
        {
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) red;
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 显示效果:

4、通过2个▲的重叠实现导航示意符号Λ

<!DOCTYPE html>
<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">
        div.one
        {
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) red;/*这里为导航符号颜色*/
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
            position:absolute;
        }
    div.two
        {
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) white;/*这里为背景色*/
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
            position:absolute;
            margin-top:4px;/*需要一个偏移量*/
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

显示效果:

5、与下方的DIV组合

<!DOCTYPE html>
<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">
        div.one
        {
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) red;
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
            position:absolute;
        }
    div.two
        {
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) black;/*black不是背景色,便于观察*/
            border-style: solid;
            border-width: 80px;
            height: 0px;
            width: 0px;
            position:absolute;
            margin-top:2px;
            z-index:1;
        }
      div.three{     
         position:absolute;
         width:400px;
         height:100px;
         border:2px solid red;/*需要设置边界宽度*/
         margin-top:158px
      }
    </style>
</head>
<body>
   
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
   
</body>
</html>

便于观察的黑色背景:

改为背景色"白色"后显示效果:

6、完整的小例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        *
        {
            margin: 0px;
            padding: 0px;
        }
        #show
        {
            margin: 10px auto;
            position: absolute;
            top: 50px;
            left: 50px;
            text-align: center;
        }
        #some
        {
            width: 200px;
            margin-left: 100px;
            text-align: center;
            position: absolute;
            background-color: rgba(255, 0, 0,0.6);
            border-radius: 5px;
        }
        #info
        {
            width: 400px;
            height: 300px;
            position: absolute;
        }
        #outarrow
        {
            border-color: transparent transparent #efefef;
            border-style: solid;
            border-width: 16px;
            height: 0;
            width: 0;
            position: absolute;
            top: 0px;
            left: 184px;
        }
        #innerarrow
        {
            border-color: transparent transparent white;
            border-style: solid;
            border-width: 16px;
            height: 0;
            width: 0;
            position: absolute;
            top: 0px;
            left: 184px;
            margin-top: 6px;
        }
        #content
        {
            border: 4px solid;
            border-radius: 4px;
            border-color: #efefef;
            width: 400px;
            margin: 32px auto 0px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
            #content p
            {
                text-align: left;
                text-indent: 20px;
            }
    </style>
</head>
<body>
    <div id="show">
        <div id="some">下面就是箭头效果</div>
        <div id="info">
            <div id="outarrow"></div>
            <div id="innerarrow"></div>
            <div id="content">
                <h1>使用边界产生箭头</h1>
                <p>要点1:设置盒子的宽高均为0,只设置边界宽度</p>
                <p>要点2:可以通过border-style改变效果</p>
            </div>
        </div>
    </div>
</body>
</html>

显示效果:

 7、改变border-style 有趣的效果

<!DOCTYPE html>
  <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">
          div
          {
             border-color: green blue red black;
             border-style: dotted;/*除了solid,可以试试dotted,dashed;grooved等*/
             border-width: 80px;
             height: 0px;
             width: 0px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>



打赏我,让我更有动力~

收藏   0 | Support  0 | Against  0
Login | Register Can Publish Content

精美音乐推荐

最近热帖
window + php 安装redis扩展 0
返回顶部