平行四边形按钮小样式

平行四边形按钮小样式<div class="title1" @click="go_BI2"><div class="skew1">人工智能巡视预警平台</div></div>.title1{cursor: pointer;background: rgba(28, 81, 109,0.5);width: 290px;margin-top: 15px;c

成长中的向日葵

1035人浏览 · 2021-12-22 10:12:58

成长中的向日葵 · 2021-12-22 10:12:58 发布

平行四边形按钮小样式

在这里插入图片描述

<div class="title1" @click="go_BI2">
        <div class="skew1">人工智能巡视预警平台</div>
      </div>

.title1{
    cursor: pointer;
    background: rgba(28, 81, 109,0.5);
    width: 290px;
    margin-top: 15px;
    color: #fff;
    font-size: 22px;
    position: fixed;
    top:0px;
    left: 20%;
    text-align: center;
    transform: skewX(23deg);
    border:1px solid #366e85;
    z-index: 9999;
    .skew1{
      transform: skewX(-23deg);
      padding: 5px 0;
    }
  }