如何用htmldiv和css制作形状

html5 • • 问答

我想创建这样的 html 页面

我用 svg 创建了这个，这是我的代码

<body>
    <div>
        <svg viewbox="0 0 20 13.4">
        <defs>
          <clipPath>
            <polygon points="0 0, 9.9 0, 9.9 5, 0 8" />
          </clipPath>
          <clipPath>
            <polygon points="9.9 0, 9.9 5, 20 8, 20 0" />
          </clipPath>
          
        </defs>
        <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="13.4" width="20" clip-path="url(#top)"/>
        <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="13.4" width="20" clip-path="url(#right)"/>
        
      </svg>
    </div>

      </div>
</body>

我如何将它转换为没有 svg 标签的只有 html 和 css

回答

clip-path:polygon() 可以轻松做到：

html {
  height:100%;
  background:url(https://picsum.photos/id/104/800/800) center/cover;
}

html::before,
html::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
}
html::before {
  left:0;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 50%,0 80%);
}
html::after {
  right:0;
  background:url(https://picsum.photos/id/1019/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 80%,0 50%);
}

您可以应用于任何 html 元素：

.box {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(https://picsum.photos/id/104/800/800) center/cover;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.box::before {
  left: 0;
  background: url(https://picsum.photos/id/1016/800/800) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 80%);
}

.box::after {
  right: 0;
  background: url(https://picsum.photos/id/1019/800/800) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 50%);
}
<div></div>

使用 CSS 变量可以轻松调整图像：

.box {
  height: 200px;
  width: 300px;
  position: relative;
  background: var(--img-1) center/cover;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.box::before {
  left: 0;
  background: var(--img-2) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 80%);
}

.box::after {
  right: 0;
  background: var(--img-3) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 50%);
}
<div></div>
 
 <div></div>

以上是如何用htmldiv和css制作形状的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>