css - 在 CSS 中降低高度的形状按钮

Question

我们需要指导来创建如下所示的按钮 CSS。请让我们知道它是否可以使用 CSS，让我们知道是否有任何示例可以让我改进形状。

Answer 1

使用伪元素很容易:before

.box {
  height:40px;
  width:200px;
  background-color:Orange;
  position:relative;
  display:inline-block;
  border-radius:0px 0px 5px 0;
  text-align:center;
  font-weight:bold;
  font-family:arial;
  color:#fff;
  font-size:20px;
  line-height:50px;  
}
.box:before {
  position:absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid Orange;
  border-right: 197px solid transparent;
  bottom:-20px;
  left:0;
  border-radius:0px 0px 0px 5px;  
}

<div class="box">+ADD NEW</div>