css实现边框梯形

html代码

<div class="title">
   <div class="oricl">
     <span></span>
   </div>
   <div class="oricl1">
     <span></span>
   </div>
 </div>

css 代码

.title{
  width: 50%;
  border: 1px solid green;
  display: flex;
  color: white;
  font-size: 28px;
  justify-content: center;
}
.oricl{
  border-top: 9vh solid #032E4E;
  border-left: 2vw solid transparent;
  height: 0; 
  width: 20vw;
  position: relative;
}
.oricl span{
  display: block;
  border-top: 9vh solid #030829;
  border-left: 2vw solid transparent;
  height: 0; 
  width: 20vw;
  position: absolute;
  left: -1.7vw;
  top: -9.8vh;
}

.oricl1{
  border-top: 9vh solid #032E4E;
  border-right: 2vw solid transparent; 
  height: 0; 
  width: 20vw;
  position: relative;
}
.oricl1 span{
  display: block;
  border-top: 9vh solid #030829;
  border-right: 2vw solid transparent;
  height: 0; 
  width: 20vw;
  position: absolute;
  right: -1.7vw;
  top: -9.8vh;
}

效果图