border的特殊用法

大家很容易在一些网页上看到二级菜单上有一个小的三角形，这个小三角型 除了可以使用图片或者使用iconfont写出来，还可以使用border写出来

这边简单的为大家举一个例子，希望对大家有用吧！

css样式为：

      *{
             margin:0;
             padding:0;
         }
         .box{
             position: relative;
             margin:100px 400px;
             animation: move1 4s linear infinite;
         }
         .box div{
             /*opacity: 0.6;*/
         }
         .box1{
             border-left:200px solid red;
             border-right:200px solid transparent;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
         }
         .box2{
             border-left:200px solid transparent;
             border-right:200px solid yellow;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             top:0;
         }
         .box3{
             border-left:200px solid transparent;
             border-right:200px solid green;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             transform: translateX(-200px);
             transform: rotate(180deg);
         }
         .box4{
             border-left:200px solid transparent;
             border-right:200px solid palevioletred;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             top:100px;
             left: 100px;
             transform: rotate(90deg);
         }
         .box5{
             border-left:200px solid blueviolet;
             border-right:200px solid transparent;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             top:-100px;
             left: 100px;
             transform: rotate(-90deg);
         }
         .box6{
             border-left:200px solid transparent;
             border-right:200px solid yellowgreen;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             left: -200px;
             top:200px;
 
         }
         .box7{
             border-left:200px solid red;
             border-right:200px solid transparent;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             top:200px;
             left: 200px;
 
         }
         .box8{
             border-left:200px solid transparent;
             border-right:200px solid blue;
             border-bottom:200px solid transparent;
             content:" ";
             width:0;
             height:0;
             position: absolute;
             top:-100px;
             left:-100px;
             transform: rotate(90deg);
 
         }
         .boxt{
             position: relative;
             top:-400px;
             animation: move 2s linear infinite;
         }
         @keyframes move {
             from {
                 transform-origin: 200px 200px;
                 transform: rotate(0);
             }
             to {
                 transform-origin: 200px 200px;
                 transform: rotate(360deg);
             }
         }
         @keyframes move1 {
             from {
                 transform-origin: 200px 200px;
                 transform: rotate(360deg) scale(1);
             }
             to {
                 transform-origin: 200px 200px;
                 transform:rotate(0) scale(1.5);
             }
         }

html样式为：

 <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="boxt">
          <div class="box5"></div>
          <div class="box6"></div>
          <div class="box7"></div>
          <div class="box8"></div>
      </div>
  </div>

虽然这里我举例的并不是二级菜单上的小三角，但是你只要明白了这个原理，二级菜单上的小三角直接用border和定位就可以写出来了！