css实现4个角有边框

// html     react JSX
 <div className={styles.intro} style={
  {background: 'rgba(255,255,255,'+ opacity+')'}}>
          <span className={styles.lpArrow}></span> 
          <span className={styles.rpArrow}></span>
          <span className={styles.lbArrow}></span>
          <span className={styles.rbArrow}></span>
 </div>

//css   index.less
.intro {
    color: #fff;
    position: relative;
    > span {
     	position: absolute;
     	width: 10px;
        height: 10px;
   }
    .lpArrow { 
        border-top: 1px solid #00F6E5;
        border-left: 1px solid #00F6E5;
    }
    .rpArrow {
        right: 0;
        b