I’m trying to create this design. A rectangle with one side is uneven. It will be a parent div and will contain other children in it.
#myelement {
display: flex;
justify-content: center;
align-items: center;
background-color: #FFD580;
height: 200px;
}<div id="myelement">
Hello world
</div>2
You can use clip-path for the irregular shapes, this will help to create all most kind or regular shapes,
But the design you mentioned you need to use background image with svg icons, then you will be able achieve the exact design whatever you required, please follow the below code
.svg-irregular-rectangle {
width: 300px;
height: 200px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><path d="M0,0 L300,0 L300,180 Q280,185 260,182 T200,180 Q150,185 100,182 T40,185 Q20,180 0,180 Z" fill="%23f5f0eb"/></svg>');
padding: 20px;
box-sizing: border-box;
}<div class="svg-irregular-rectangle "></div>SVG Path :
path d="M0,0 L300,0 L300,180 Q280,185 260,182 T200,180 Q150,185 100,182 T40,185 Q20,180 0,180 Z"
The top, left, and right sides are straight lines, as indicated by L300,0 L300,180.
The bottom edge is created using quadratic Bézier curves (Q), which produce the smooth, wavy effect you see in the image. You can play with the Q values and see the different pattern on bottom.
The final Z command closes the path by connecting the last point back to the start.
As tacoshy mentioned in his comment this could be achieved using clip path.
Using the clip-path: polygon option will enable you to play with your wanted shape, for example for this clip polygon :
0 0, 100% 0, 100% 85%, 90% 90%, 80% 85%, 70% 90%, 60% 85%, 50% 90%, 40% 85%, 30% 90%, 20% 85%, 10% 90%, 0 85%
You can create this shape :
#myelement {
display: flex;
justify-content: center;
align-items: center;
background-color: #FFD580;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 90%, 80% 85%, 70% 90%, 60% 85%, 50% 90%, 40% 85%, 30% 90%, 20% 85%, 10% 90%, 0 85%);
} <div id="myelement">
Hello world
</div>From this point you can play with your polygon points and create you wanted shape.
If you want you can achieve curves like this :
h1 {
text-decoration: underline;
}
#myelement {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffd580;
height: 200px;
clip-path: polygon(
100% 0%,
0% 0%,
0% 65%,
1% 64.95%,
2% 64.8%,
3% 64.6%,
4% 64.3%,
5% 63.9%,
6% 63.45%,
7% 62.9%,
8% 62.25%,
9% 61.55%,
10% 60.8%,
11% 59.95%,
12% 59.05%,
13% 58.1%,
14% 57.1%,
15% 56.05%,
16% 55%,
17% 53.9%,
18% 52.8%,
19% 51.65%,
20% 50.5%,
21% 49.35%,
22% 48.2%,
23% 47.05%,
24% 45.9%,
25% 44.8%,
26% 43.75%,
27% 42.75%,
28% 41.75%,
29% 40.8%,
30% 39.9%,
31% 39.1%,
32% 38.35%,
33% 37.65%,
34% 37.05%,
35% 36.5%,
36% 36.05%,
37% 35.65%,
38% 35.35%,
39% 35.15%,
40% 35.05%,
41% 35%,
42% 35.05%,
43% 35.2%,
44% 35.45%,
45% 35.75%,
46% 36.15%,
47% 36.65%,
48% 37.2%,
49% 37.85%,
50% 38.55%,
51% 39.35%,
52% 40.2%,
53% 41.1%,
54% 42.05%,
55% 43.05%,
56% 44.1%,
57% 45.15%,
58% 46.3%,
59% 47.4%,
60% 48.55%,
61% 49.7%,
62% 50.85%,
63% 52%,
64% 53.15%,
65% 54.25%,
66% 55.35%,
67% 56.4%,
68% 57.45%,
69% 58.4%,
70% 59.35%,
71% 60.2%,
72% 61.05%,
73% 61.8%,
74% 62.45%,
75% 63.05%,
76% 63.6%,
77% 64.05%,
78% 64.4%,
79% 64.7%,
80% 64.85%,
81% 65%,
82% 65%,
83% 64.9%,
84% 64.75%,
85% 64.5%,
86% 64.2%,
87% 63.75%,
88% 63.25%,
89% 62.7%,
90% 62.05%,
91% 61.3%,
92% 60.5%,
93% 59.65%,
94% 58.75%,
95% 57.8%,
96% 56.8%,
97% 55.75%,
98% 54.65%,
99% 53.55%,
100% 52.4%
);
} <div id="myelement">
Hello world
</div>2
Use clip-path: Polygon();
Experiment with each side values, and set whatever one you like.
Aakash Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2