Menu
Suppose I have two div's, as (beautifully) displayed below. I have already taken a look The Shapes of CSS, but I haven't found out how exactly the yellow shape in below picture could be made. Is it possible to make the yellow shape in a similar manner to the things described in the link above.
Or even, now we're on the subject, the picture below would describe the ideal situation. Is this possible in css, or using some other tools? (Note that the curves in the picture aren't ideal, but maybe a standard bezier curve with varying height would work?)
250
For that, we have to design a div element of HTML with a class property of CSS named trapezoid . After that, we use CSS border properties (left, top, and bottom), and we will use the default value of border-right for div to create a Trapezoid shape.
All you have to do is to change border-radius: 40px to border-radius: 50% .
For the second part of the question you can create SVG clip paths then reference the id in the css. You can see the SVGs at the bottom of the HTML.
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
There are more details about both methods here: https://css-tricks.com/clipping-masking-css/
But be aware support for clip-path is quite limited at the moment.
http://caniuse.com/#search=clip-path
div {
float: left;
height: 100px;
width: 130px;
}
.holder {
position: relative;
}
.top {
width: 490px;
}
.bottom {
width: 490px;
position: absolute;
left: 0;
top: 35px;
}
.top-left {
background-color: aquamarine;
height: 35px;
}
.top-mid {
background-color: aquamarine;
width: 97px;
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
}
.top-right {
background-color: aquamarine;
margin-top: 37px;
height: 53px;
}
.bottom-left {
background-color: aqua;
height: 34px;
}
.bottom-mid {
background-color: aqua;
width: 97px;
-webkit-clip-path: url(#bottom-path);
clip-path: url(#bottom-path);
}
.bottom-right {
background-color: aqua;
margin-top: 55px;
height: 45px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Clip Path Shape</title>
</head>
<body>
<div class="holder">
<div class="top">
<div class="top-left"></div>
<div class="top-mid"></div>
<div class="top-right"></div>
</div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-mid"></div>
<div class="bottom-right"></div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="bottom-path">
<path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864
l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" />
</clipPath>
</defs>
</svg>
<svg width="0" height="0">
<defs>
<clipPath id="top-path">
<path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68
c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>For part one of the question we can use clip-path each of the corner coordinates is separated by a comma.
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
div {
float: left;
height: 100px;
width: 130px;
}
.holder {
position: relative;
}
.top {
width: 490px;
}
.bottom {
width: 490px;
position: absolute;
left: 0;
top: 43px;
}
.top-left {
background-color: aquamarine;
height: 43px;
}
.top-mid {
background-color: aquamarine;
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
}
.top-right {
background-color: aquamarine;
margin-top: 20px;
height: 80px;
}
.bottom-left {
background-color: aqua;
height: 43px;
}
.bottom-mid {
background-color: aqua;
-webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
}
.bottom-right {
background-color: aqua;
margin-top: 43px;
height: 57px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Shape</title>
</head>
<body>
<div class="holder">
<div class="top">
<div class="top-left"></div>
<div class="top-mid"></div>
<div class="top-right"></div>
</div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-mid"></div>
<div class="bottom-right"></div>
</div>
</div>
</body>
</html>Here is first shape in pure css. You need to use perspective.
.shape {
display: flex;
margin: 50px;
}
.red,
.green {
color: white;
padding: 15px;
box-sizing: border-box;
}
.green {
background: green;
position: relative;
z-index: 2;
width: 200px;
height: 127px;
margin-top: 45px;
margin-left: -22px;
}
.red {
width: 100px;
background: red;
height: 56px;
z-index: 2;
}
.parent {
position: relative;
-webkit-perspective: 711px;
perspective: 711px;
margin-left: -30px;
margin-top: 19px;
}
.el {
width: 200px;
-webkit-transform: rotateX(-27deg) rotateY(-40deg);
transform: rotateX(-27deg) rotateY(-40deg);
height: 65px;
background: #FFF200;
position: relative;
perspective: 350px;
-webkit-perspective: 350px;
}
.el:after {
content: '';
position: absolute;
left: 0;
top: 100%;
border-style: solid;
border-width: 0 200px 70px 0;
border-color: transparent #FFF200 transparent transparent;
}<div class="shape">
<div class="red">Div 1</div>
<div class="parent">
<div class="el"></div>
</div>
<div class="green">Div 2</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
