css實現小箭頭的實現方式

時間 2019-11-18

標籤 css 實現箭頭方式欄目 CSS 简体版

原文原文鏈接

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

/*transparent 爲透明*/spa

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

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

/*箭頭向左*/
   .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;
   }it

/*箭頭向右*/
   .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>class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。