Css 右梯形轮廓形状（带透明度）

我试图模拟一条类似于的有角度的路径线

我这样做的方式是使用两个梯形形状，并且彼此重叠，这将与中所示的背景相同

但我意识到我希望形状的剩余部分是透明的，而不是能够重叠其他对象

核心只是一点点CSS，一个右梯形div中的outlineMaker div

---

有没有一种简洁明了的方法可以做到这一点？

而不是试图以某种方式强迫这种方法工作。我想了几分钟，意识到我可以做到：

.梯形线1{
位置：绝对位置；
宽度：200px；
高度：10px；
背景：蓝色；
}
.梯形线2{
位置：绝对位置；
宽度：200px；
高度：10px；
背景：蓝色；
左：200px；
-webkit转换源：0%0%；
-webkit变换：旋转（45度）；
}

---

Herp a derp…

使用@Feng hoo tip完成以下nice示例。

HTML标记

<div class="trapezoidLine1">
    <div class="trapezoidLine2"/>
</div>
<div class="trapezoidLine3">
    <div class="trapezoidLine4"/>
</div>

试试小提琴

<div class="trapezoidLine1">
  <div class="trapezoidLine2"/>
</div>

.trapezoidLine1 {
  position: absolute;
  width: 200px;
  height: 10px;
  background: blue;
}

.trapezoidLine2 {
  position: absolute;
  width: 200px;
  height: 10px;
  background: blue;
  left: 200px;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(45deg);
}

<div class="trapezoidLine1">
    <div class="trapezoidLine2"/>
</div>
<div class="trapezoidLine3">
    <div class="trapezoidLine4"/>
</div>

.trapezoidLine1 {
  position: absolute;
  width: 200px;
  height: 2px;
  background: blue;
}
.trapezoidLine3 {
  position: relative;
  margin-top:45px;
  width: 207px;
  height: 2px;
    background:blue;
  }
.trapezoidLine2 {
  position: absolute;
  width: 47px;
  height: 2px;
  background: blue;
  left: 200px;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(80deg);
}

.trapezoidLine4 {
  position: absolute;
  width: 45px;
  height: 2px;
  background: blue;

  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(270deg);
}