如何将梯形转向对面？

我在CSS中有一个梯形形状,但问题是我还需要相同类型的梯形转动边框,第一个梯形css是这样的:

  #trapezoid1 {
    height: 0;
 width: 350px;
 border-bottom: 190px solid rgb(2, 145, 178);
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
 display:block;
 position:relative;
}

但是我还需要第二梯形转动border-bottom到border-top,但是在这种情况下,文本正在被从实际梯形飞走了.

我做border-top的,而不是border-bottom把对面的梯形.

这是问题的完整显示.. jsfiddle