使用div+css实现简单的箭头

css 专栏收录该内容
0 篇文章 0 订阅

一、情景描述:

   众所周知 ,我们在使用frame框架的时候,将左边或者上边的内容隐藏或者显示,在操作过程中,如果我们不想通过图标来实现箭头功能,可以通过div+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>
    <title></title>
    <style type="text/css">
        body
        {
            text-align: center;
        }
        .box
        {
            background-color: Teal;
            width: 600px;
            height: 600px;
            margin: 50px auto;
        }
        
        .box p
        {
            background:green;
        }
        
        /*箭头向上*/
        .to_top
        {
            
            width: 0;
            height: 0;
            border-bottom: 10px solid #fff;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
        
        /*箭头向下*/
        .to_bottom
        {    
            width: 0;
            height: 0;
            border-top: 10px solid #fff;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
         /*箭头向左*/
          .to_left {    
            width: 0;
            height: 0;
            border-right: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
          /*箭头向右*/
         .to_right   
         {
              
            width: 0;
            height: 0;
            border-left: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>
            向上箭头</p>
        <div class="to_top">
        </div>
        <p>
            向左箭头</p>
        <div class="to_left">
        </div>
        <p>
            向右箭头</p>
        <div class="to_right">
        </div>
        <p>
            向下箭头</p>
        <div class="to_bottom">
        </div>
    </div>
</body>
</html>

三 、最终效果界面

四、感谢

谢谢大家支持,领个支付宝红包 。支付宝首页搜索“519449706”领大额现金红包

 

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<head> <title>CSS无图片带箭头DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{ position:absolute; top:-20px; *top:-22px; left:20px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #666 transparent; border-style:dashed dashed solid dashed; border-width:10px; } i{position:absolute; top:-9px; *top:-9px; left:-10px; display:block; height:0; width:0; font-size: 0; line-height: 0; border-color:transparent transparent #fff transparent; border-style:dashed dashed solid dashed; border-width:10px; } .content{ border:1px solid #666; -moz-border-radius:3px; -webkit-border-radius:3px; position:absolute; background-color:#fff; width:100%; height:100%; padding:5px; *top:-2px; *border-top:1px solid #666; *border-top:1px solid #666; *border-left:none; *border-right:none; *height:102px; box-shadow: 3px 3px 4px #999; -moz-box-shadow: 3px 3px 4px #999; -webkit-box-shadow: 3px 3px 4px #999; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#999999'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; } </style> </head> <body> <div class="container"> <div class="content"><br>这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <s> <i></i> </s> </div> <br /> </body> </html>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值