如何使中间的蓝色条纹比其他4条细？答案

【问题标题】：How to make the blue stripe in the middle thinner than the other 4 stripes?如何使中间的蓝色条纹比其他4条细？
【发布时间】：2020-08-23 02:10:52
【问题描述】：

我数学不好，所以我很难弄清楚如何更改百分比，以使中间的蓝线比其他所有线都细。帮忙？

body {
    background:#111;
}


#wrapper {
    width:100%;
    display:grid;
    place-items:center;
}


#flag {
    width:1000px;
    height:600px;
    position:absolute;
    top:50px;

    background-image:linear-gradient(to bottom, 
    #b3106e 20%, /*1st*/
    #b563cf 20% 40%, /*2nd*/
    #4154C0 40% 60%, /*3rd*/
    #3b9cbf 60% 80%, /*4th*/
    #007570 80% 100% /*5th*/
    );
}

<body>
<div id="wrapper">

    <div id="flag"></div>

</div> <!-- wrapper -->
</body>

【问题讨论】：

我在这里给了你一个处理 calc() 的方法：stackoverflow.com/a/63524596/8620333 你可以很容易地用它来做你想做的事
@TemaniAfif 不错的答案，我赞成它，但公平地说，如果你的数学不好，计算出将其更改为有一个不相等行的计算实际上并不容易（或者即使你不是！）
@FluffyKitten with calc() 你不需要计算，你只需要公式：jsfiddle.net/jyc93swp
@TemaniAfif 是的我知道。但是，如果你的数学不好，那么计算出不相等的结果应该是什么并不是微不足道的。

标签： html css

【解决方案1】：

这完全取决于你想要多薄！

条纹均以 20% 的比例均匀分布。
如果将其分别增加到 21%，则蓝线将为 100%-(21*4) = 16%
将其他行分别增加到 22%，蓝线得到 100%-(22*4) = 8%
之后，您将进入小数。

如何计算线路百分比：

如果你想为蓝线选择一个宽度并计算其余部分使用什么，你可以这样做：

( 100% - %size of blue line) / 4

例如对于 6% 的蓝线：(100-6)/4 = 其余每条线的 23.5%。

示例：

这里很薄，只有 8%：

body {
    background:#111;
}


#wrapper {
    width:100%;
    display:grid;
    place-items:center;
}


#flag {
    width:1000px;
    height:600px;
    position:absolute;
    top:50px;

    background-image:linear-gradient(to bottom, 
    #b3106e 22%, /*1st*/
    #b563cf 22% 44%, /*2nd*/
    #4154C0 44% 52%, /*3rd*/
    #3b9cbf 52% 76%, /*4th*/
    #007570 76% 100% /*5th*/
    );
}

<body>
<div id="wrapper">

    <div id="flag"></div>

</div> <!-- wrapper -->
</body>

或者 16% 怎么样：

body {
    background:#111;
}


#wrapper {
    width:100%;
    display:grid;
    place-items:center;
}


#flag {
    width:1000px;
    height:600px;
    position:absolute;
    top:50px;

    background-image:linear-gradient(to bottom, 
    #b3106e 21%, /*1st*/
    #b563cf 21% 42%, /*2nd*/
    #4154C0 42% 58%, /*3rd*/
    #3b9cbf 58% 79%, /*4th*/
    #007570 79% 100% /*5th*/
    );
}

<body>
<div id="wrapper">

    <div id="flag"></div>

</div> <!-- wrapper -->
</body>

【讨论】：

@ghostyTrickster 很高兴为您提供帮助！我刚刚用一个向后工作的公式更新了这个问题，即选择你想要蓝线的 % 大小，你可以计算出其他 4 个的 %value。
我看到了！从现在开始我应该可以用它自己计算了，非常感谢！

【解决方案2】：

您只需要进行一些数学运算，请按照下列步骤操作： 1- 采用您想要的蓝线高度（以 % 为单位），例如 10% 2- 现在你做 100%-10% = 90% 3- 将结果分成其他 4 行，所以 90/4 = 22.5% 4-现在您的代码将是

body {
    background:#111;
}


#wrapper {
    width:100%;
    display:grid;
    place-items:center;
}


#flag {
    width:1000px;
    height:600px;
    position:absolute;
    top:50px;

    background-image:linear-gradient(to bottom, 
    #b3106e 22.5%, /*1st - 0 to 22.5*/
    #b563cf 22.5% 45%, /*2nd - 22.5 + 22.5 = 45*/
    #4154C0 45% 55%, /*3rd - 45 + 10 = 55*/
    #3b9cbf 55% 77.5%, /*4th - 55 + 22.5 = 77.5*/
    #007570 77.5% 100% /*5th - 77.5 + 22.5 = 100*/
    );
}

<body>
<div id="wrapper">

    <div id="flag"></div>

</div> <!-- wrapper -->
</body>

【讨论】：