带你玩转css中各种方向小箭头

html:

<div class="arrow">文字文字</div>

CSS:

div {

       position: relative;

    }

    .arrow:after,.arrow:before {

        width: 0;

        height: 0;

        border: 10px solid transparent;

        border-left-color: orange;

        position: absolute;

        content: "";

    }

   .arrow:before{

    top: 0;

   left: 70px;//根据实际情况调整

   border-left-color: white;

   }