纯css3制作小三角

html部分
···

    
    
    
    
    
    



    
 
    
 
    
向下
    
向上
    
向左
    
向右

    
-------------- 三角箭头 arrow  ----------------

    

    

    
    
    

    

    

···

CSS 部分

 .t1 {
    width: 0;
    height: 0;
    border: 100px solid #339933;
  }
  .t2 {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: #FFCCCC #0099CC #996699 #339933;
  }
  /* 向下 */
  .td {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: #FFCCCC transparent transparent transparent;
  }
  .td:hover {
    animation: t2R 1s forwards;
  }
  @keyframes t2R {
    from {
      transform: rotateZ(90deg);
      transform-origin: 50% 25%;
    }
    to {
      transform: rotateZ(180deg);
      transform-origin: 50% 25%;
    }
  }
  /* 向上 */
  .tu {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent #FFCCCC transparent;
  }
  /* 向左 */
  .tl {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #FFCCCC transparent transparent;
  }
  /* 向右 */
  .tr {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent transparent #FFCCCC;
  }
  /*向上*/
  .au {
    position: relative;
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
  }
  .au:after {
    position: absolute;
    z-index: 2;
    bottom: -101px;
    left: -100px;
    content: '';
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
  .au:hover {
    animation: auR 1s forwards;
  }
  @keyframes auR {
    from {
      transform: rotateZ(90deg);
      transform-origin: 50% 75%;
    }
    to {
      transform: rotateZ(180deg);
      transform-origin: 50% 75%;
    }
  }
  /*向下*/
  .ad {
    position: relative;
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
  }
  .ad:after {
    position: absolute;
    z-index: 2;
    top: -101px;
    left: -100px;
    content: '';
    border-width: 100px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
  }
  .ad:hover {
    animation: adR 1s forwards;
  }
  @keyframes adR {
    from {
      transform: rotateZ(90deg);
      transform-origin: 50% 25%;
    }
    to {
      transform: rotateZ(180deg);
      transform-origin: 50% 25%;
    }
  }
  /* 向左 */
  .al {
    position: relative;
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
  }
  .al:after {
    position: absolute;
    width: 0;
    height: 0;
    left: -99px;
    top: -100px;
    content: '';
    border-width: 100px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
  }
  .al:hover {
    animation: alR 1s forwards;
  }
  @keyframes alR {
    form {
      transform: rotateZ(90deg);
      transform-origin: 75% 50%;
    }
    to {
      transform: rotateZ(180deg);
      transform-origin: 75% 50%;
    }
  }
  /* 向右 */
  .ar {
    position: relative;
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
  }
  .ar:after {
    position: absolute;
    width: 0;
    height: 0;
    left: -101px;
    top: -100px;
    content: '';
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }
  .ar:hover {
    animation: arR 1s forwards;
  }
  @keyframes arR {
    from {
      transform: rotateZ(90deg);
      transform-origin: 25% 50%;
    }
    to {
      transform: rotateZ(180deg);
      transform-origin: 25% 50%;
    }
  }