1

この画像のような角度のあるパス ラインをエミュレートしようとしています。

私がやっている方法は、2 つの台形の形状を使用し、この 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;
}

これを行うためのきちんとした簡潔な方法はありますか？

4

2 に答える 2

1

この方法を強制的にひねりを加えて動作させようとする代わりに。私はそれを数分間考えて、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);
}

ダープをヘルペ...

于 2013-10-26T21:17:34.190 に答える