问我可以创建带有纯css的交叉衬背景框吗？

EN

.blue-area,
.green-area {
  display: inline-block;
  line-height: 30px;
  height: 30px;
}

.blue-area {
  padding: 0 0 0 8px;
  background-color: #26799b;
  position: relative;
}

.blue-area:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-color: transparent transparent #26799b transparent;
  border-style: solid;
  border-width: 0 30px 30px 0;
  display: block;
}

.green-area {
  background-color: #386c19;
  padding: 0 8px 0 30px;
}

<div class="wt">
  <div class="blue-area">text dfg gh fgh </div><div class="green-area">text fgh fgh fgh fgdfg dfg dfg</div>
</div>

div {background:linear-gradient(to top right, #247A9B, #247A9B 50%,#386C19 50% ,#386C19);}

html {
  background: linear-gradient( to top right, #247A9B, #247A9B 49%, #386C19 50%, #386C19);
  min-height: 100%;
}


/* or use degrees */

p {
  margin: 2em;
  background: #247A9B;
  border: solid;
}

p span {
  display: inline-block;
  padding: 0 1.5em 0 0;
  background: linear-gradient( 60deg, #386C19, #386C19 93%, #247A9B 94%, #247A9B);
}

p span b {
  display: none;
}

p span:hover b {
  display: inline;
}

<p>
  <span> text to increase on hover <b>here more text in green area</b></span> text in blue area
</p>