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

【问题标题】：Right trapezoid outline shape (with transparency)右梯形轮廓形状（带透明度）
【发布时间】：2013-10-26 19:55:03
【问题描述】：

我正在尝试模拟类似于this image 的倾斜路径线。

我这样做的方式是使用两个梯形形状，并将一个与另一个重叠，这与this 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;
}

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

【问题讨论】：

标签： css transparency css-shapes

【解决方案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/

【讨论】：

【解决方案2】：

而不是试图强迫这种方式以某种方式扭曲。我想了几分钟，意识到 DUHHHHHHH，我可以做到this：

<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...

【讨论】：