How to make shape with html div and css

Question

i want to create html page like this

i have created this with svg here is my code

how i convert this to only html and css without svg tag

user_8620333 · Answer

clip-path:polygon() can easily do it:

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%);
}

You can apply to any html element:

.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%);
}

With CSS variables to be able to easily adjust the images:

.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%);
}

user_8902132 · Answer

Have you tried using the css property clip-path ? https://developer.mozilla.org/fr/docs/Web/CSS/clip-path

I have made an example using clip-path here.

CSS

html, body { min-height: 100vh; margin: 0; }
body { position: relative; }

.shape {
  height: 100vh;
  position: absolute;
}

.a { 
  background: red;
  left: 0;
  top: 0;
  width: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  z-index: 50;
}

.b { 
  background: green; 
  right: 0;
  top: 0;
  width: 50%;
  clip-path: polygon(0 0, 0 30%, 100% 100%, 100% 0);
  z-index: 50;
}

.c { 
  background: blue; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  z-index: 40;
}

.img-container {
  height: 100%;
  width: 100%;
}

.img-container > img {
  display: block; 
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

How to make shape with html div and css

2 Answers