复杂的设计模式-重叠透明形状？ [英] Complex design pattern - overlapping transparent shapes?

查看：57
本文介绍了复杂的设计模式-重叠透明形状？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建以下形状。





几乎我尝试通过以下方式创建此图像。为了使用HTML和CSS创建此图像。我尝试使用以下代码。



  .left1 {向左飘浮;变换：rotate（180deg）;}。halfCircleRight1 {height：70px;宽度：70像素；右上边界半径：10em；右下边框半径：10em；背景：＃326d7d； } .halfCoverTop1 {高度：35px;宽度：35像素；右下边框半径：10em；背景：#ffffff; } .halfCoverBottom1 {高度：35px;宽度：35像素；右上边界半径：10em；背景：#ffffff;}。left {float：left;}。halfCircleRight {高度：70px;宽度：70像素；右上边界半径：10em；右下边框半径：10em；背景：＃b1a51f; } .halfCoverTop {高度：35px;宽度：35像素；右下边框半径：10em；背景：#ffffff;}。halfCoverBottom {高度：35px;宽度：35像素；右上边界半径：10em；背景：#ffffff;}  

 < div class =左>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div> < / div>< div class = left>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div> < / div>< div class = left> < div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div> < / div>< div class = left> < div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div>< div class = halfCircleRight> < div class = halfCoverTop>< / div> < div class = halfCoverBottom>< / div>< / div> < / div>< div class = left1>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div> < / div>< div class = left1>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div> < / div>< div class = left1> < div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div> < / div>< div class = left1> < div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1 < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div>< div class = halfCircleRight1> < div class = halfCoverTop1>< / div> < div class = halfCoverBottom1>< / div>< / div> < / div>



但是有些地方我错了不能实现我的期望输出。我无法弄清楚我的方法。谁能帮助实现我的实际输出。

解决方案

创建此形状有多种可能性。每个人都有自己的优点和缺点。您可以决定最适合您的需求。



基于SVG的方法：



SVG是推荐的并且更合适



步骤1：



绘制要在形状中重复的小组件，然后使用SVG的图案进行重复。我们可以使用SVG的 path 元素创建此形状，并用一些颜色，渐变或图案填充它。



仅一个属性 d 用于定义 path 元素中的形状。此属性本身包含一些短命令和一些对于这些命令有效的必要参数。



下面是创建此形状的必要代码：

 <路径d = M 0，.125 
 Q .110，.114 .125,0 
 A .125，.125 0 0 1 .125，.250 
 Q .110，.136 0，.125 /

我在path元素内使用了3个命令。下面是简要说明：




  • M 命令用于定义起点。

  • Q 命令用于绘制曲线。
    • >
  • A 命令也用于绘制曲线。



工作示例： 



  body {background-color：#ececec;} svg {margin：10px auto; display：block;}  

 < svg width = 170  height = 170 viewBox = 0 0 50 50> < path d = M 0,25 Q 22,22 25,0 A 25,25 0 0 1 25,50 Q 22,28 0,25 fill =＃aba219 fill-opacity = inherit /> ;< / svg>



输出图像：



以下是第一步的输出：







步骤＃3：



最后，我们将创建两个模式并将其应用于2个不同的< rect> 元素以创建最终输出。



以下代码模式将用于创建最终输出：

 < defs> 
< path id = tile d = ... /> 
 
< pattern id = pattern1> 
< use href =＃tile fill =＃aba219 /> 
< / pattern> 
< pattern id = pattern2 patternTransform = scale（-1）> 
< use href =＃tile fill =＃023e54 /> 
< / pattern> 
< / defs> 
< rect width = 200 height = 880 fill = url（＃pattern1） /> 
< rect width = 200 height = 200 fill = url（＃pattern2） />

大多数代码如上所述。但是请注意使用< use> 元素。我们没有在每个 pattern 元素中定义 path 元素，而是只定义了一次并用< use> 元素。



< use> 元素从SVG文档中获取节点，并将其复制到其他位置。



工作示例： 



  body {background-color：#ececec;} svg {margin：0 auto; display：block;}  

 < svg width = 190  height = 190 viewBox = 0 0 990 990> < defs> < path id = tile fill = inherit fill-opacity = inherit d = M 0，.125 Q .110，.114 .125,0 A .125，.125 0 0 1 .125， .250 Q .110，.136 0，.125 / < pattern id = pattern1 x = 0 y = 0 width = 25％ height = 25％ patternUnits = objectBoundingBox patternContentUnits = objectBoundingBox> < use href =＃tile fill =＃aba219 /> < / pattern> < pattern id = pattern2 x = 0 y = 0 width = 25％ height = 25％ patternUnits = objectBoundingBox patternContentUnits = objectBoundingBox patternTransform = scale（-1）> ; < use href =＃tile fill =＃023e54 fill-opacity = 0.7 /> < / pattern> < / defs> < rect x = 0 y = 0 width = 880 height = 880 fill = url（＃pattern1） /> < rect x = 110 y = 110 width = 880 height = 880 fill = url（＃pattern2） />< / svg>



输出图像：



以下是最终的输出图像：







基于HTML / CSS的方法：



虽然可能，但我不建议这样做，因为创建此功能需要很多元素



工作示例： 



  body {background-color：#ececec;}。tile-list {list-style：none;保证金：0自动;宽度：225px； padding：0;}。tile-list li {display：flex;}。tile-list li：nth-​​child（even）{position：relative; padding-left：25px;边距：-25px 0; z-index：1;}。tile {border-radius：100％;职位：相对溢出：隐藏；高度：50px；宽度：50像素；}。tile .left {位置：绝对；溢出：隐藏；高度：50％;宽度：50％;左：0； top：0;}。tile .left.bottom {bottom：0; top：auto;}。tile .left。：before {box-shadow：0 0 0 10px＃aba219;边界半径：100％；位置：绝对；溢出：隐藏；内容：’’;高度：200％;宽度：200％;左：-100％;顶部：-100％;}。tile .left.bottom :: before {底部：-100％;顶部：自动；}。tile .right {位置：绝对；溢出：隐藏；高度：100％;宽度：100％;左：50％； top：0;}。tile .right。：before {background-color：＃aba219;位置：绝对；高度：100％;内容：’’;宽度：100％;左：-50％; top：0;}。tile-list li：nth-​​child（even）.tile {transform：scale（-1）;}。tile-list li：nth-​​child（even）.tile .right :: before {background -color：rgb（2，62，84，0.7）;}。tile-list li：nth-​​child（even）.tile .left。：before {box-shadow：0 0 0 10px rgb（2，62，84） ，0.7）;}  

 < ul class = tile -list> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < / li> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < / li> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < / li> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < / li> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div> < / li> < li> < div class = tile> < div class = left top>< / div> < div class = left bottom>< / div> < div class = right>< / div> < / div>< div class = tile>< div class = left top>< / div>< div class = left bottom>< / div>< div class = right>< / div>< / div>< div class = tile>< div class = left top>< / div>< div class = left底部>< / div>< div class = right>< / div>< / div>< div class = tile>< div class = left top> < / div>< div class =左下< / div>< div class = right< / div>< / div>< / li>< / ul> ;


I'm trying to create following shape.

Almost I tried to create this image by following way. In order create this Image using HTML and CSS. I tried to use following code.

.left1{
  float:left;
  transform: rotate(180deg);
}
.halfCircleRight1{
   height: 70px;
   width: 70px;
   border-top-right-radius: 10em;
   border-bottom-right-radius: 10em;
   background: #326d7d;       
}

.halfCoverTop1 {
   height: 35px;
   width: 35px;
   border-bottom-right-radius: 10em;
   background: #ffffff;
   
}

.halfCoverBottom1{
   height: 35px;
   width: 35px;
   border-top-right-radius: 10em;
   background: #ffffff;
}
.left{
  float:left;
}
.halfCircleRight{
   height: 70px;
   width: 70px;
   border-top-right-radius: 10em;
   border-bottom-right-radius: 10em;
   background: #b1a51f;       
}

.halfCoverTop {
   height: 35px;
   width: 35px;
   border-bottom-right-radius: 10em;
   background: #ffffff;
}

.halfCoverBottom{
   height: 35px;
   width: 35px;
   border-top-right-radius: 10em;
   background: #ffffff;
}

<div class="left">
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
 </div>
<div class="left">
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
 </div>
<div class="left">
  <div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
 </div>
<div class="left">
  <div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
  <div class="halfCoverTop"></div>
  <div class="halfCoverBottom"></div>
</div>
 </div>
<div class="left1">
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
 </div>
<div class="left1">
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
 </div>
<div class="left1">
  <div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
 </div>
<div class="left1">
  <div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
  <div class="halfCoverTop1"></div>
  <div class="halfCoverBottom1"></div>
</div>
 </div>

But some where I'm going wrong to achieve my desires output.I'm not able to figure out my approach. Could any one can please help achieve my actual output.

解决方案

There are multiple possibilities to create this shape. Each one has its own pros and cons. You may decide which best suits your needs.

SVG Based Approach:

SVG is the recommneded and more appropriate way to create such shapes.

Step #1:

The idea is to draw a small component that is being repeated in your shape and then repeat it using SVG's patterns. We can use SVG's path element to create this shape and fill it with some color, gradient or pattern.

Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.

Below is the necessary code to create this shape:

<path d="M 0,.125
         Q .110,.114 .125,0
         A .125,.125 0 0 1 .125,.250
         Q .110,.136 0,.125" />

I've used 3 commands inside path element. Below is a brief description:

  • M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
  • Q command is used to draw curves.
  • A command is also used to draw curves.

Working Example:

body {
  background-color: #ececec;
}
svg {
  margin: 10px auto;
  display: block;
}

<svg width="170" height="170" viewBox="0 0 50 50">
    <path d="M 0,25
             Q 22,22 25,0
             A 25,25 0 0 1 25,50
             Q 22,28 0,25" fill="#aba219" fill-opacity="inherit" />

</svg>

Output Image:

Below is the output of first step:

Step #2:

Now we will create a pattern that will repeat this shape. After creating this we will be a bit more closer to the final output.

Consider the below code:

<defs>
    <pattern id="pattern1" x="0" y="0" width="25%" height="25%"
             patternUnits="objectBoundingBox"
             patternContentUnits="objectBoundingBox">
        <path id="tile" fill="inherit" fill-opacity="inherit"
              d="M 0,.125
                 Q .110,.114 .125,0
                 A .125,.125 0 0 1 .125,.250
                 Q .110,.136 0,.125" />
    </pattern>
</defs>

<rect x="0" y="0" width="200" height="200" fill="url(#pattern1)" />

Below is a brief description of above code:

  • SVG's <defs> element is used to define graphics/elements for later use. Objects defined inside defs are not drawn immediately on screen. They will be referenced by other parts of the code in future.
  • The <pattern> element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals ("tiled") to cover an area. This pattern will be referenced by fill / stroke attributes of graphics elements.
  • <rect> element is used to draw rectangular area on screen. Notice the fill attribute used on this element. This attribute is referencing the pattern defined above in <defs> section. Now we are actually using this pattern to fill the rectangular area.

Working Example:

body {
  background-color: #ececec;
}
svg {
  margin: 0 auto;
  display: block;
}

<svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <path id="tile" fill="inherit" fill-opacity="inherit"
              d="M 0,.125
                 Q .110,.114 .125,0
                 A .125,.125 0 0 1 .125,.250
                 Q .110,.136 0,.125" />

        <pattern id="pattern1" x="0" y="0" width="25%" height="25%"
                 patternUnits="objectBoundingBox"
                 patternContentUnits="objectBoundingBox">
            <use href="#tile" fill="#aba219" />
        </pattern>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="url(#pattern1)" />
</svg>

Output Image:

Below is the result till now:

Step #3:

Finally we will create two patterns and apply it on 2 different <rect> elements to create the final output.

Following code pattern will be used to create final output:

<defs>
    <path id="tile" d="..." />

    <pattern id="pattern1">
        <use href="#tile" fill="#aba219" />
    </pattern>
    <pattern id="pattern2" patternTransform="scale(-1)">
        <use href="#tile" fill="#023e54" />
    </pattern>
</defs>
<rect width="200" height="880" fill="url(#pattern1)" />
<rect width="200" height="200" fill="url(#pattern2)" />

Most of the code is similar as described above. However notice the use of <use> element. Instead of defining path element in each pattern element, we have defined it once and copying it in 2 other places with <use> element.

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.

Working Example:

body {
  background-color: #ececec;
}
svg {
  margin: 0 auto;
  display: block;
}

<svg width="190" height="190" viewBox="0 0 990 990">
    <defs>
        <path id="tile" fill="inherit" fill-opacity="inherit"
              d="M 0,.125
                 Q .110,.114 .125,0
                 A .125,.125 0 0 1 .125,.250
                 Q .110,.136 0,.125" />

        <pattern id="pattern1" x="0" y="0" width="25%" height="25%"
                 patternUnits="objectBoundingBox"
                 patternContentUnits="objectBoundingBox">
            <use href="#tile" fill="#aba219" />
        </pattern>

        <pattern id="pattern2" x="0" y="0" width="25%" height="25%"
                 patternUnits="objectBoundingBox"
                 patternContentUnits="objectBoundingBox"
                 patternTransform="scale(-1)">
            <use href="#tile" fill="#023e54" fill-opacity="0.7" />
        </pattern>
    </defs>

    <rect x="0" y="0" width="880" height="880" fill="url(#pattern1)" />
    <rect x="110" y="110" width="880" height="880" fill="url(#pattern2)" />
</svg>

Output Image:

Below is the final output image:

HTML/CSS Based Approach:

Although possible but I won't recommend this because a lot of elements will be required to create this shape which is won't be an efficient approach.

Working Example:

body {
  background-color: #ececec;
}
.tile-list {
  list-style: none;
  margin: 0 auto;
  width: 225px;
  padding: 0;
}

.tile-list li {
  display: flex;
}
.tile-list li:nth-child(even) {
  position: relative;
  padding-left: 25px;
  margin: -25px 0;
  z-index: 1;
}

.tile {
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  height: 50px;
  width: 50px;
}
.tile .left {
  position: absolute;
  overflow: hidden;
  height: 50%;
  width: 50%;
  left: 0;
  top: 0;
}
.tile .left.bottom {
  bottom: 0;
  top: auto;
}
.tile .left::before {
  box-shadow: 0 0 0 10px #aba219;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;
  content: '';
  height: 200%;
  width: 200%;
  left: -100%;
  top: -100%;
}
.tile .left.bottom::before {
  bottom: -100%;
  top: auto;
}
.tile .right {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 0;
}
.tile .right::before {
  background-color: #aba219;
  position: absolute;
  height: 100%;
  content: '';
  width: 100%;
  left: -50%;
  top: 0;
}
.tile-list li:nth-child(even) .tile {
  transform: scale(-1);
}
.tile-list li:nth-child(even) .tile .right::before {
  background-color: rgb(2, 62, 84, 0.7);
}
.tile-list li:nth-child(even) .tile .left::before {
  box-shadow: 0 0 0 10px rgb(2, 62, 84, 0.7);
}

<ul class="tile-list">
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
  </li>
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
  </li>
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
  </li>
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
  </li>
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
  </li>
  <li>
    <div class="tile">
      <div class="left top"></div>
      <div class="left bottom"></div>
      <div class="right"></div>
    </div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
</ul>

这篇关于复杂的设计模式-重叠透明形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆