html - 复杂的设计模式-重叠透明形状？

标签 html css css3 css-shapes

我正在尝试创建以下形状。
Pattern
几乎我试着按照下面的方式创建这个图像。为了使用HTML和CSS创建这个图像。我试着用下面的代码。

.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>

但有些地方我会错误的实现我的愿望输出。我无法找出我的方法。有谁能帮我实现实际产出吗。

最佳答案

创建此形状有多种可能性。各有利弊。你可以决定哪个最适合你的需要。
基于SVG的方法：
SVG是推荐的、更适合创建此类形状的方法。
步骤1：
其思想是绘制一个在形状中重复的小组件，然后使用SVG的模式重复它。我们可以使用SVG的path元素创建这个形状，并用一些颜色、渐变或图案填充它。
只有一个属性d用于定义path元素中的形状。此属性本身包含许多短命令和一些参数，这些参数是这些命令工作所必需的。
下面是创建此形状所必需的代码：

<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>

输出图像：
以下是第一步的输出：
Tile Image
步骤2：
现在我们将创建一个将重复此形状的图案。创建之后，我们将更接近最终输出。
请考虑以下代码：
<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)" />

以下是对上述代码的简要说明：
SVG的<defs>元素用于定义图形/元素以供以后使用。defs中定义的对象不会立即在屏幕上绘制。它们将在将来被代码的其他部分引用。
<pattern>元素定义了一个图形对象，该对象可以在重复的x和y坐标间隔（“平铺”）处重新绘制以覆盖一个区域。图形元素的属性将引用此模式。
fill元素用于在屏幕上绘制矩形区域。注意这个元素上使用的stroke属性。此属性引用上面在<rect>部分中定义的模式。现在我们实际使用这个模式来填充矩形区域。
工作示例：
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>

输出图像：
结果如下：
Pattern
步骤3：
最后，我们将创建两个模式并将其应用于两个不同的fill元素以创建最终输出。
以下代码模式将用于创建最终输出：
<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)" />

大部分代码与上述类似。但是请注意<defs>元素的使用。我们没有在每个<rect>元素中定义<use>元素，而是定义了一次并在其他两个位置使用path元素复制它。
pattern元素从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>

输出图像：
以下是最终输出图像：
Pattern
基于HTML/CSS的方法：
虽然可能，但我不建议这样做，因为创建这个形状需要很多元素，这不是一个有效的方法。
工作示例：
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>

关于html - 复杂的设计模式-重叠透明形状？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49587509/

上一篇：php - 如何使用 AngularJS 或 jQuery 更改 HTML 表格中的文本颜色？

下一篇：html - Unicode 作为元素符号不缩进第二行

相关文章：

javascript - 我想在jQuery和css中为我的菜单项添加一个子元素

html - 流体布局示例

html - 阻止浏览器读取媒体查询

javascript - 如何为在客户端检查密码的用户创建登录页面

javascript - 通过 jQuery 添加后样式化类

javascript - jQuery 在容器中存在文本

html - block 元素之间垂直的神秘间隙

javascript - 根据表中最低的 <span> 设置一组 <span> 的位置 jQuery

css - 当原始变量更改时，将CSS变量重新分配给

html - 如何隔离Bootstrap CSS以避免与已下载模板的默认CSS样式发生冲突

©2024 IT工具网  联系我们