css 右边三角

<div class="trapzoid">普通</div>

.trapzoid{width:300px; height:150px;margin:200px auto; background:#06F; position:relative;
border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  font-size: 50px;
  font-family:serif;
}
.trapzoid:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-50px;
border-top: 75px solid transparent;
border-left: 50px solid #06f;
border-bottom: 75px solid transparent;}

参考的地址：

 https://www.imooc.com/article/7929 

https://blog.csdn.net/qq_39897978/article/details/90172695