html - 创建 CSS 形状时出现问题

Question

我想创建一个这样的形状，但底部是空心的。我能做什么？

  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 100px;
  border: 50px solid #1abc9c;
  border-top: 0 solid;
  border-bottom: 35px solid rgba(0,0,0,0);
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-transform:   translateX(21px) ;
  transform:   translateX(21px) ;

Answer 1

让它变得简单

 .ribbon {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 100px;
  border: 50px solid #1abc9c;
  border-top: 0 solid;
  border-bottom: 35px solid rgba(0,0,0,0);
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
}

.ribbon {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 100px;
  border: 50px solid #1abc9c;
  border-top: 0 solid;
  border-bottom: 35px solid rgba(0,0,0,0);
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
}

<div class="ribbon"></div>