CSS中

Question

我们需要指导创建一个如下所示的按钮CSS。如果有可能使用CSS，请告诉我们，如果有任何我可以改进形状的例子，请告诉我们。

Answer 1

使用伪元素轻松：在

之前

＆＃13;

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;