CSS形状内有文字

Question

我需要帮助。到目前为止，我能够创建左边的div，但我被第二个div，右边的一个卡住了。有什么提示吗？

Css Shape

This is the HTML

<div class="shape">
  ALEGETI MEDIEREA
    </div>

这是CSS

      .shape{
  text-align:center;
  background-color:#8ed7c2;
  width:50%;
  height:178px;
  line-height:178px;
  color:#fef5ca;
  float:left;
  position:relative;
  font-size:50px;
  top:20px;


}
.shape:after{
  content:"";
  width:0px;
  height:178px;
  border-top:178px solid rgba(3,78,136,0.7);
  border-right:60px solid transparent;
  position:absolute;
   left:100%;


}

Answer 1

This is the HTML

<div class="shape">
  ALEGETI MEDIEREA
    </div>

这是CSS

      .shape{
  text-align:center;
  background-color:#8ed7c2;
  width:50%;
  height:178px;
  line-height:178px;
  color:#fef5ca;
  float:left;
  position:relative;
  font-size:50px;
  top:20px;


}
.shape:after{
  content:"";
  width:0px;
  height:178px;
  border-top:178px solid rgba(3,78,136,0.7);
  border-right:60px solid transparent;
  position:absolute;
   left:100%;


}