右梯形轮廓形状（透明） [英] Right trapezoid outline shape (with transparency)

问题描述

我正在尝试模拟类似于 此图片 。

I'm trying to emulate an angled path line similar to this image.

我的操作方式是使用两个梯形形状，并将一个与另一个形状重叠与 此jsFiddle 中的背景相同。

The way I'm doing it is using two trapezoid shapes, and overlapping one with another that would be the same as the background as seen in this jsFiddle.

但是我意识到我希望形状的 rest 为透明，而不是要与其他对象重叠。

But I realized I want the rest of the shape to be transparent instead of being able to overlap other objects.

核心只是CSS的一部分，它是 rightTrapezoid div内的 outlineMaker div。

The core is just a little bit of CSS, an outlineMaker div inside of a rightTrapezoid 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;
}

是否有一种简洁明了的方法？

Is there a neat and concise way to do this?

推荐答案

使用@Feng Huo技巧完成下面的示例。




HTML标记

Complete example following nice using @Feng Huo tip.

HTML Markup

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

这篇关于右梯形轮廓形状（透明）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！