创建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>

Answer 2

很少有CSS会实现这个

div {
  display: inline-block;
  position: relative;
  height: 0px;
  width: 0px;
  border: 25px solid green;
  border-left: 25px solid transparent;
  margin-right:75px;
}
div:after {
  display: inline-block;
  position: absolute;
  top: -25px;
  content: '';
  width: 100px;
  height: 50px;
  background-color: green;
}

<div></div>
Some content<br>Something