创建CSS形状时出现问题

Question

I want to create a shape like this but the hollow goes in the bottom. what can I do?

  -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

make it easy

 .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

Few lines of CSS will achieve this

 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