[英]CSS margin-left issue
I have 5 diagonal stripes here… 我在这里有5条斜条纹...
https://jsfiddle.net/70wk1hm2/ https://jsfiddle.net/70wk1hm2/
.... I have a problem with the left side (and the right -> It should be window-filling), it is empty, there should be stripes too, which come from the left (out of the nothing).And no matter what browser-windowsize. ....我的左侧有一个问题(右侧->应该是窗口填充),它是空的,也应该有条纹,这些条纹来自左边(什么都没有)。无论什么浏览器-Windowsize。 I know that I have a problem with margin-left, but I don't get the result which I would like to see.
我知道我的左边距有问题,但是没有得到我想要看到的结果。
And the spacing should be the same on both sides 而且两边的间距应该相同
HTML Code: HTML代码:
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
CSS Code: CSS代码:
.stripe {
height: 100%;
width: 2%;
background-color: black;
position: fixed;
transform: skew(-20deg);
transform-origin: left bottom;
}
.stripe:nth-child(1) {
height: 100%;
width: 2%;
margin-left: 0%;
background-color: black;
position: fixed;
}
.stripe:nth-child(2) {
height: 100%;
width: 2%;
margin-left: 4%;
background-color: black;
position: fixed;
animation-delay: 0.2s;
}
.stripe:nth-child(3) {
height: 100%;
width: 2%;
margin-left: 8%;
background-color: black;
position: fixed;
}
.stripe:nth-child(4) {
height: 100%;
width: 2%;
margin-left: 12%;
background-color: black;
position: fixed;
}
.stripe:nth-child(5) {
height: 100%;
width: 2%;
margin-left: 16%;
background-color: black;
position: fixed;
}
Hope this is what you expected. 希望这是您所期望的。
In the example below, each stripe
has 2%
width and 1%
margin around ~> it has total 4%
of viewport width. 在下面的示例中,每个
stripe
宽度均为2%
,边界处的边距为1%
>>>的总宽度为视口宽度的4%
。 To fill 100%
viewport, you needs 100 / 4 = 25
stripes. 要填充
100%
视口,您需要100 / 4 = 25
条纹。 The .mask
element help us hidden overflowing spaces from negative margin of .container
. .mask
元素帮助我们从.container
负边界隐藏隐藏的溢出空间。 The results is completely symmetric by centered point. 结果是完全对称的中心点。
html, body { height: 100%; margin: 0; } .mask { height: 100%; overflow: hidden; } .container { height: 100%; margin: 0 -100vh; } .stripe { float: left; height: 100%; width: 2%; margin: 0 1%; background-color: black; transform: skew(-20deg); transform-origin: center center; }
<div class="mask"> <div class="container"> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> <div class="stripe"></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.