css实现小箭头的实现方式

最新推荐文章于 2024-08-01 13:41:00 发布

weixin_34306676

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量999

点赞数

文章标签： python 前端 ViewUI

原文链接：https://my.oschina.net/u/3887849/blog/1840757

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{
       margin: 0;
       padding: 0;
   }

/*transparent 为透明*/

/*箭头向下*/
   .box-down{
       display: inline-block;
       width: 0;
       height: 0;
       border-right: 30px solid transparent;
       border-left: 30px solid transparent;
       border-bottom: 50px solid red;
   }

/*箭头向上*/
   .box-up{
       display: inline-block;
       width: 0;
       height: 0;
       border-left:30px solid transparent;
   border-right: 30px solid transparent;
   border-top:50px solid green;
   }

/*箭头向左*/
   .box-left{
       display: inline-block;
       width: 0;
       height: 0;
       border-top: 30px solid transparent;
       border-left: 50px solid pink;
       border-bottom: 30px solid transparent;
       margin-left: 20px;
   }

/*箭头向右*/
   .box-right{
       display: inline-block;
       width: 0;
       height: 0;
       border-top: 30px solid transparent;
       border-right: 50px solid orange;
       border-bottom: 30px solid transparent;
   }
   </style>
</head>
<body>
   <div class="box-up"></div>
   <div class="box-down"></div>
   <div class="box-right"></div>
   <div class="box-left"></div>
</body>
</html>