CSS 从下到上的墙

Question

我正在尝试仅使用 CSS 创建墙壁图案。墙应该像现实生活中的墙一样自下而上生长。多亏了 flex，我才做到了这么多。我现在正尝试以不均匀的模式排列 div，以使其更逼真。 Like this（我知道有 JavaScript 解决方案，但我是否可以只使用 CSS 来实现这个？

body {
  display: flex;
  min-height: 100%;
  background: #f8f8f8;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  /*display: grid;
  grid-gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-item {
  background: blue;
  padding: 5px;
  width: 100px;
  height: 30px;
  margin: 10px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

<ul class="flex-container wrap-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
  <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
  <li class="flex-item">16</li>
  <li class="flex-item">17</li>
  <li class="flex-item">18</li>
  <li class="flex-item">19</li>
  <li class="flex-item">20</li>
  <li class="flex-item">21</li>
  <li class="flex-item">22</li>
  <li class="flex-item">23</li>
  <li class="flex-item">24</li>
  <li class="flex-item">25</li>
  <li class="flex-item">26</li>
  <li class="flex-item">27</li>
  <li class="flex-item">28</li>
  <li class="flex-item">29</li>
  <li class="flex-item">30</li>
  <li class="flex-item">31</li>
  <li class="flex-item">32</li>
  <li class="flex-item">33</li>
  <li class="flex-item">34</li>
  <li class="flex-item">35</li>
  <li class="flex-item">36</li>
  <li class="flex-item">37</li>
  <li class="flex-item">38</li>
  <li class="flex-item">39</li>
  <li class="flex-item">40</li>
  <li class="flex-item">41</li>
  <li class="flex-item">42</li>
  <li class="flex-item">43</li>
  <li class="flex-item">44</li>
  <li class="flex-item">45</li>
  <li class="flex-item">46</li>
  <li class="flex-item">47</li>
  <li class="flex-item">48</li>
  <li class="flex-item">49</li>
  <li class="flex-item">50</li>
  <li class="flex-item">51</li>
  <li class="flex-item">52</li>
  <li class="flex-item">53</li>
  <li class="flex-item">54</li>
  <li class="flex-item">55</li>
  <li class="flex-item">56</li>
  <li class="flex-item">57</li>
  <li class="flex-item">58</li>
  <li class="flex-item">59</li>
  <li class="flex-item">60</li>
  <li class="flex-item">61</li>
  <li class="flex-item">62</li>
  <li class="flex-item">63</li>
  <li class="flex-item">64</li>
  <li class="flex-item">65</li>
  <li class="flex-item">66</li>
  <li class="flex-item">67</li>
  <li class="flex-item">68</li>
  <li class="flex-item">69</li>
  <li class="flex-item">70</li>
  <li class="flex-item">71</li>
  <li class="flex-item">72</li>
  <li class="flex-item">73</li>
  <li class="flex-item">74</li>
  <li class="flex-item">75</li>
  <li class="flex-item">76</li>
  <li class="flex-item">77</li>
  <li class="flex-item">78</li>
  <li class="flex-item">79</li>
  <li class="flex-item">80</li>
  <li class="flex-item">81</li>
  <li class="flex-item">82</li>
  <li class="flex-item">83</li>
  <li class="flex-item">84</li>
  <li class="flex-item">85</li>
  <li class="flex-item">86</li>
  <li class="flex-item">87</li>
  <li class="flex-item">88</li>
  <li class="flex-item">89</li>
  <li class="flex-item">90</li>
  <li class="flex-item">91</li>
  <li class="flex-item">92</li>
  <li class="flex-item">93</li>
  <li class="flex-item">94</li>
  <li class="flex-item">95</li>
  <li class="flex-item">96</li>
  <li class="flex-item">97</li>
  <li class="flex-item">88</li>
  <li class="flex-item">99</li>
  <li class="flex-item">100</li>

</ul>

Answer 1

您也可以使用 background: linear-gradient 来实现。代码更少。

希望这对您有所帮助:)

div {
    width:100%;
    height:100vh;
    display:inline-block;
    background: linear-gradient(163deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(161deg, transparent 0px, #181818 1px, #222 2px, #222 15px, transparent 15px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px);
    background-color: #585858;
    background-position: 2px 1px, 23px 16px,48px 15px, 21px 30px;
    background-size: 48px 30px;
}

<div></div>

Answer 2

我给你做了一个逻辑。

假设第一行有 4 个项目，这意味着第二行有 5 个项目。所以两行的总项目是 4+5=9

所以你必须定位这些项目 :nth-child(9n) 和 nth-child(9n+5)

^{注：(9n)也可以写成(9n+0)或 (9n+9).}

只需将这些项目的宽度更改为其他项目的一半。

堆栈片段

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-item {
  background: blue;
  padding: 5px;
  width: 25%;
  height: 50px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.flex-item:nth-child(9n),
.flex-item:nth-child(9n+5) {
  width: 12.5%;
}

<ul class="flex-container wrap-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
  <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
  <li class="flex-item">16</li>
  <li class="flex-item">17</li>
  <li class="flex-item">18</li>
  <li class="flex-item">19</li>
  <li class="flex-item">20</li>
  <li class="flex-item">21</li>
  <li class="flex-item">22</li>
  <li class="flex-item">23</li>
  <li class="flex-item">24</li>
  <li class="flex-item">25</li>
  <li class="flex-item">26</li>
  <li class="flex-item">27</li>
  <li class="flex-item">28</li>
  <li class="flex-item">29</li>
  <li class="flex-item">30</li>
  <li class="flex-item">31</li>
  <li class="flex-item">32</li>
  <li class="flex-item">33</li>
  <li class="flex-item">34</li>
  <li class="flex-item">35</li>
  <li class="flex-item">36</li>
  <li class="flex-item">37</li>
  <li class="flex-item">38</li>
  <li class="flex-item">39</li>
  <li class="flex-item">40</li>
  <li class="flex-item">41</li>
  <li class="flex-item">42</li>
  <li class="flex-item">43</li>
  <li class="flex-item">44</li>
  <li class="flex-item">45</li>
  <li class="flex-item">46</li>
  <li class="flex-item">47</li>
  <li class="flex-item">48</li>
  <li class="flex-item">49</li>
  <li class="flex-item">50</li>
  <li class="flex-item">51</li>
  <li class="flex-item">52</li>
  <li class="flex-item">53</li>
  <li class="flex-item">54</li>
  <li class="flex-item">55</li>
  <li class="flex-item">56</li>
  <li class="flex-item">57</li>
  <li class="flex-item">58</li>
  <li class="flex-item">59</li>
  <li class="flex-item">60</li>
  <li class="flex-item">61</li>
  <li class="flex-item">62</li>
  <li class="flex-item">63</li>
  <li class="flex-item">64</li>
  <li class="flex-item">65</li>
  <li class="flex-item">66</li>
  <li class="flex-item">67</li>
  <li class="flex-item">68</li>
  <li class="flex-item">69</li>
  <li class="flex-item">70</li>
  <li class="flex-item">71</li>
  <li class="flex-item">72</li>
  <li class="flex-item">73</li>
  <li class="flex-item">74</li>
  <li class="flex-item">75</li>
  <li class="flex-item">76</li>
  <li class="flex-item">77</li>
  <li class="flex-item">78</li>
  <li class="flex-item">79</li>
  <li class="flex-item">80</li>
  <li class="flex-item">81</li>
  <li class="flex-item">82</li>
  <li class="flex-item">83</li>
  <li class="flex-item">84</li>
  <li class="flex-item">85</li>
  <li class="flex-item">86</li>
  <li class="flex-item">87</li>
  <li class="flex-item">88</li>
  <li class="flex-item">89</li>
  <li class="flex-item">90</li>
  <li class="flex-item">91</li>
  <li class="flex-item">92</li>
  <li class="flex-item">93</li>
  <li class="flex-item">94</li>
  <li class="flex-item">95</li>
  <li class="flex-item">96</li>
  <li class="flex-item">97</li>
  <li class="flex-item">88</li>
  <li class="flex-item">99</li>
</ul>

要进一步优化，你真的不需要给每个项目一个class。

如果 li 中只应有数字，请使用 CSS counter.

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container li {
  background: blue;
  padding: 5px;
  width: 25%;
  height: 50px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.flex-container li:nth-child(9n),
.flex-container li:nth-child(9n+5) {
  width: 12.5%;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container li:before {
  counter-increment: my-counter;
  content: counter(my-counter);
}

<ul class="flex-container wrap-reverse">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 3

感谢大家的帮助。这是我的最终结果:)

ul.wall {
  list-style-type: none;
  margin: 0;
  padding:0;
}

li{
  margin: 0;
}

.wall-bg{
  background: #f8f8f8;
  padding: 50px 0;
  width: 100%;
}

.wall {
  display: grid;
  grid-template-columns: repeat(25, [col] 1fr);
  grid-gap: 2px;
  width: 100%;
  -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
   direction: rtl; 

}

.brick {
  background-color: #98471f;
  /*height: 25px*/
  grid-column: span 2;
  color: #c98a6a;
  text-align:center;
  padding: 6px 0;
  transform: rotate(180deg);
  direction: ltr;
}



@media (min-width: 1200px) {
  .brick:nth-child(26n),
  .brick:nth-child(26n+1) {
    grid-column: span 1;
  }
}

@media (min-width: 800px) and (max-width: 1200px) {
  .wall {
    grid-template-columns: repeat(17, [col] 1fr);
  }

  /*.brick {
    height: 20px;
  }*/

  .brick:nth-child(16n),
  .brick:nth-child(16n+1) {
    grid-column: span 1;
  }

}

@media (max-width: 800px) {
  .wall {
    grid-template-columns: repeat(11, [col] 1fr);
  }

  /*.brick {
    height: 20px;
  }*/

  .brick:nth-child(12n),
  .brick:nth-child(12n+1) {
    grid-column: span 1;
  }

}

<div class="wall-bg">     
   <div class="container-fluid">
         <ul class="wall">
              
               <li class="brick">
                001
               </li>
               <li class="brick">002</li>
               <li class="brick">003</li>
               <li class="brick">004</li>
               <li class="brick">005</li>
               <li class="brick">006</li>
               <li class="brick">007</li>
               <li class="brick">008</li>
               <li class="brick">009</li>
               <li class="brick">010</li>
               <li class="brick">011</li>
               <li class="brick">012</li>
               <li class="brick">013</li>
               <li class="brick">014</li>
               <li class="brick">015</li>
               <li class="brick">016</li>
               <li class="brick">017</li>
               <li class="brick">018</li>
               <li class="brick">019</li>
               <li class="brick">020</li>
               <li class="brick">021</li>
               <li class="brick">022</li>
               <li class="brick">023</li>
               <li class="brick">024</li>
               <li class="brick">025</li>
               <li class="brick">026</li>
               <li class="brick">027</li>
               <li class="brick">028</li>
               <li class="brick">029</li>
               <li class="brick">030</li>
               <li class="brick">031</li>
               <li class="brick">032</li>
               <li class="brick">033</li>
               <li class="brick">034</li>
               <li class="brick">035</li>
               <li class="brick">036</li>
               <li class="brick">037</li>
               <li class="brick">08</li>
               <li class="brick">039</li>
               <li class="brick">040</li>
               <li class="brick">041</li>
               <li class="brick">042</li>
               <li class="brick">043</li>
               <li class="brick">044</li>
               <li class="brick">045</li>
               <li class="brick">046</li>
               <li class="brick">047</li>
               <li class="brick">048</li>
               <li class="brick">049</li>
               <li class="brick">050</li>
               <li class="brick">051</li>
               <li class="brick">052</li>
               <li class="brick">053</li>
               <li class="brick">054</li>
               <li class="brick">055</li>
               <li class="brick">056</li>
               <li class="brick">057</li>
               <li class="brick">058</li>
               <li class="brick">059</li>
               <li class="brick">050</li>
               <li class="brick">061</li>
               <li class="brick">062</li>
               <li class="brick">063</li>
               <li class="brick">064</li>
               <li class="brick">065</li>
               <li class="brick">066</li>
               <li class="brick">067</li>
               <li class="brick">068</li>
               <li class="brick">069</li>
               <li class="brick">070</li>
               <li class="brick">071</li>
               <li class="brick">072</li>
               <li class="brick">073</li>
               <li class="brick">074</li>
               <li class="brick">075</li>
               <li class="brick">076</li>
               <li class="brick">077</li>
               <li class="brick">078</li>
               <li class="brick">079</li>
               <li class="brick">080</li>
               <li class="brick">081</li>
               <li class="brick">082</li>
               <li class="brick">083</li>
               <li class="brick">084</li>
               <li class="brick">085</li>
               <li class="brick">086</li>
               <li class="brick">087</li>
               <li class="brick">088</li>
               <li class="brick">089</li>
               <li class="brick">090</li>
               <li class="brick">091</li>
               <li class="brick">092</li>
               <li class="brick">093</li>
               <li class="brick">094</li>
               <li class="brick">095</li>
               <li class="brick">096</li>
               <li class="brick">097</li>
               <li class="brick">098</li>
               <li class="brick">099</li>
               <li class="brick">100</li>
               <li class="brick">101</li>
               <li class="brick">102</li>
               <li class="brick">103</li>
               <li class="brick">104</li>
               <li class="brick">105</li>
               <li class="brick">106</li>
               <li class="brick">107</li>
               <li class="brick">108</li>
               <li class="brick">109</li>
               <li class="brick">110</li>
               <li class="brick">111</li>
               <li class="brick">112</li>
               <li class="brick">113</li>
               <li class="brick">114</li>
               <li class="brick">115</li>
               <li class="brick">116</li>
               <li class="brick">117</li>
               <li class="brick">118</li>
               <li class="brick">119</li>
               <li class="brick">120</li>
               <li class="brick">121</li>
               <li class="brick">122</li>
               <li class="brick">123</li>
               <li class="brick">124</li>
               <li class="brick">125</li>
               <li class="brick">126</li>
               <li class="brick">127</li>
               <li class="brick">128</li>
               <li class="brick">129</li>
               <li class="brick">130</li>
               <li class="brick">131</li>
               <li class="brick">132</li>
               <li class="brick">133</li>
               <li class="brick">134</li>
               <li class="brick">135</li>
               <li class="brick">136</li>
               <li class="brick">137</li>
               <li class="brick">138</li>
               <li class="brick">139</li>
               <li class="brick">140</li>
               <li class="brick">141</li>
               <li class="brick">142</li>
               <li class="brick">143</li>
               <li class="brick">144</li>
               <li class="brick">145</li>
               <li class="brick">146</li>
               <li class="brick">147</li>
               <li class="brick">148</li>
               <li class="brick">149</li>
               <li class="brick">150</li>
            </ul>
       </div>
   </div>

CSS 从下到上的墙

CSS wall from bottom up

html

css

flexbox

css-grid