有谁知道如何实现这样的倾斜:

使用CSS的新转换属性?
你可以看到我试图扭转两个角落,任何人都知道这是否可能?
我在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;
}
Run Code Online (Sandbox Code Playgroud)
但是我还需要第二梯形转动border-bottom到border-top,但是在这种情况下,文本正在被从实际梯形飞走了.
我做border-top的,而不是border-bottom把对面的梯形.
这是问题的完整显示.. jsfiddle