css中怎么实现向上的箭头

lewis 6年前 (2019-03-26) 阅读数 8 #程序编程

文章标签 css

css中实现向上的箭头的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用div标签来实现箭头效果；4、添加style标签并写入css样式代码来设置向上的箭头；5、通过浏览器方式查看设计效果。

具体操作方法：

1.首先创建一个html文件。

2.在html文件中添加html代码架构。

<!DOCTYPEhtml><head>
<metacharset="UTF-8">
<title>方向箭头</title>
</head>
<body>
</body>
</html>

3.然后在html代码架构中的body标签里面使用div标签来实现箭头效果。

<p>向上箭头</p><divclass="to_top"></div>

4.在html架构中的html标签里面添加style标签并写入css样式代码来设置向上的箭头。

<style>.to_top{
width:0;
height:0;
border-bottom:10pxsolid#ccc;
border-left:10pxsolidtransparent;
border-right:10pxsolidtransparent;
}
</style>

5.最后可通过浏览器方式阅读html文件查看设计效果。

完整示例代码如下：

<!DOCTYPEhtml><head>
<metacharset="UTF-8">
<title>方向箭头</title>
<styletype="text/css">
/*箭头向上*/
.to_top{
width:0;
height:0;
border-bottom:10pxsolid#ccc;
border-left:10pxsolidtransparent;
border-right:10pxsolidtransparent;
}
/*箭头向下*/
.to_bottom{
width:0;
height:0;
border-top:10pxsolid#ccc;
border-left:10pxsolidtransparent;
border-right:10pxsolidtransparent;
}
/*箭头向左*/
.to_left{
width:0;
height:0;
border-right:10pxsolid#ccc;
border-top:10pxsolidtransparent;
border-bottom:10pxsolidtransparent;
}
/*箭头向右*/
.to_right{
width:0;
height:0;
border-left:10pxsolid#cccf;
border-top:10pxsolidtransparent;
border-bottom:10pxsolidtransparent;
}
</style>
</head>
<body>
<p>向上箭头</p>
<divclass="to_top"></div>
<p>向左箭头</p>
<divclass="to_left"></div>
<p>向右箭头</p>
<divclass="to_right"></div>
<p>向下箭头</p>
<divclass="to_bottom"></div>
</body>
</html>

版权声明

本文仅代表作者观点，不代表米安网络立场。

上一篇：css怎么设置字体颜色为白色下一篇：php开发工具怎么用

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

css中怎么实现向上的箭头

版权声明

作者文章