关于用css画中空直角梯形

关于用css画中空直角梯形

• 仅需要一个class名为ti的空div即可

.ti{
  margin-top: 10px;
  position:relative;
  top: 0.27rem;
  height: 2.4rem;
  width: 100px;
  border-left:1px solid #E6E6E6;
  border-radius: .5rem;
  border-bottom-left-radius: 0;
  overflow:hidden;
  display: flex;
  align-items: center;
  color:#999;
}
.ti:before{
  content:'';
  border-top-right-radius: .3rem;
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width: 120px;
  border:1px solid #E6E6E6;
  border-bottom: 0;
  transform-origin:0 100%;
  transform:skewX(25deg);
}