[英]Right trapezoid outline shape (with transparency)
I'm trying to emulate an angled path line similar to this image . 我正在尝试模拟与此图像类似的倾斜路径线。
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 . 我这样做的方式是使用两个梯形形状,并将一个与另一个重叠, 这与jsFiddle中看到的背景相同。
But I realized I want the rest of the shape to be transparent instead of being able to overlap other objects. 但我意识到我希望形状的其余部分是透明的,而不是能够与其他物体重叠。
The core is just a little bit of CSS, an outlineMaker div inside of a rightTrapezoid div. 核心只是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;
}
Is there a neat and concise way to do this? 这样做有一个简洁明了的方法吗?
Complete example following nice using @Feng Huo tip. 使用@Feng Huo提示后的完整示例。
HTML Markup HTML标记
<div class="trapezoidLine1">
<div class="trapezoidLine2"/>
</div>
<div class="trapezoidLine3">
<div class="trapezoidLine4"/>
</div>
CSS 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);
}
Try the fiddle 试试小提琴
Instead of trying to force this way to work with a twist somehow. 而不是试图强迫这种方式以某种方式扭曲。 I gave it a couple minutes of thought and realized DUHHHHHHH, I can just do this :
我给它的思想几分钟,实现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... Herp a derp ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.