css随记（border实现平行四边行）border实现平行四边行、 css平行四边行、平行四边行、平行四边行、平行四边

border实现平行四边行

截屏2022-09-02 上午11.19.05.png

代码实现


                <div className="status-wrap">
                  <div className="status">常客</div>
                </div>

css

      .status-wrap {
        position    : relative;
        margin-right: 40px;
      }

      .status-wrap::before {
        content      : '';
        position     : absolute;
        left         : 0;
        top          : 0;
        right        : 0;
        bottom       : 0;
        border       : 2px solid #F45C21;
        border-radius: 4px;
        transform    : skewX(-10deg);

      }

      .status {
        padding  : 0px 20px;
        font-size: 22px;
        color    : #F45C21;
        border   : 0;
      }

效果

截屏2022-09-02 上午11.24.49.png

如果还不错，给个赞支持一下呗