右梯形輪廓形狀（透明）

Question

我正在嘗試模擬與此圖像類似的傾斜路徑線。

我這樣做的方式是使用兩個梯形形狀，並將一個與另一個重疊， 這與jsFiddle中看到的背景相同。

但我意識到我希望形狀的其余部分是透明的，而不是能夠與其他物體重疊。

核心只是CSS的一小部分，一個rightTrapezoid div內的outlineMaker div。

.rightTrapezoid {
    border-bottom: 100px solid red;
    border-left: 0 solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
.outlineMaker {
    border-bottom: 80px solid white;
    border-left: 0 solid transparent;
    border-right: 40px solid transparent;
    height: 20px;
    width: 80px;
}

這樣做有一個簡潔明了的方法嗎？

Answer 1

使用@Feng Huo提示后的完整示例。

HTML標記

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

CSS

.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);
}

試試小提琴

http://jsfiddle.net/TNW63/

Answer 2

而不是試圖強迫這種方式以某種方式扭曲。 我給它的思想幾分鍾，實現DUHHHHHHH，我可以做這個 ：

<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);
}

Herp a derp ...