-
Notifications
You must be signed in to change notification settings - Fork 0
/
shapes.css
34 lines (29 loc) · 6.75 KB
/
shapes.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.starburst {
width: 200px; /* adjust to control the size */
aspect-ratio: 1;
clip-path: polygon(100% 50%,89.92% 52.51%,99.61% 56.27%,89.29% 57.5%,98.43% 62.43%,88.04% 62.36%,96.49% 68.41%,86.19% 67.03%,93.82% 74.09%,83.77% 71.43%,90.45% 79.39%,80.82% 75.5%,86.45% 84.23%,77.38% 79.16%,81.87% 88.53%,73.51% 82.36%,76.79% 92.22%,69.27% 85.05%,71.29% 95.24%,64.72% 87.19%,65.45% 97.55%,59.95% 88.74%,59.37% 99.11%,55.01% 89.68%,53.14% 99.9%,50% 90%,46.86% 99.9%,44.99% 89.68%,40.63% 99.11%,40.05% 88.74%,34.55% 97.55%,35.28% 87.19%,28.71% 95.24%,30.73% 85.05%,23.21% 92.22%,26.49% 82.36%,18.13% 88.53%,22.62% 79.16%,13.55% 84.23%,19.18% 75.5%,9.55% 79.39%,16.23% 71.43%,6.18% 74.09%,13.81% 67.03%,3.51% 68.41%,11.96% 62.36%,1.57% 62.43%,10.71% 57.5%,0.39% 56.27%,10.08% 52.51%,0% 50%,10.08% 47.49%,0.39% 43.73%,10.71% 42.5%,1.57% 37.57%,11.96% 37.64%,3.51% 31.59%,13.81% 32.97%,6.18% 25.91%,16.23% 28.57%,9.55% 20.61%,19.18% 24.5%,13.55% 15.77%,22.62% 20.84%,18.13% 11.47%,26.49% 17.64%,23.21% 7.78%,30.73% 14.95%,28.71% 4.76%,35.28% 12.81%,34.55% 2.45%,40.05% 11.26%,40.63% 0.89%,44.99% 10.32%,46.86% 0.1%,50% 10%,53.14% 0.1%,55.01% 10.32%,59.37% 0.89%,59.95% 11.26%,65.45% 2.45%,64.72% 12.81%,71.29% 4.76%,69.27% 14.95%,76.79% 7.78%,73.51% 17.64%,81.87% 11.47%,77.38% 20.84%,86.45% 15.77%,80.82% 24.5%,90.45% 20.61%,83.77% 28.57%,93.82% 25.91%,86.19% 32.97%,96.49% 31.59%,88.04% 37.64%,98.43% 37.57%,89.29% 42.5%,99.61% 43.73%,89.92% 47.49%,100% 50%,89.92% 52.51%,calc(89.92% - 15.97px) calc(52.51% - 1px),calc(100% - 20px) calc(50% - 0px),calc(89.92% - 15.97px) calc(47.49% - -1px),calc(99.61% - 19.84px) calc(43.73% - -2.51px),calc(89.29% - 15.72px) calc(42.5% - -3px),calc(98.43% - 19.37px) calc(37.57% - -4.97px),calc(88.04% - 15.22px) calc(37.64% - -4.94px),calc(96.49% - 18.6px) calc(31.59% - -7.36px),calc(86.19% - 14.48px) calc(32.97% - -6.81px),calc(93.82% - 17.53px) calc(25.91% - -9.64px),calc(83.77% - 13.51px) calc(28.57% - -8.57px),calc(90.45% - 16.18px) calc(20.61% - -11.76px),calc(80.82% - 12.33px) calc(24.5% - -10.2px),calc(86.45% - 14.58px) calc(15.77% - -13.69px),calc(77.38% - 10.95px) calc(20.84% - -11.66px),calc(81.87% - 12.75px) calc(11.47% - -15.41px),calc(73.51% - 9.4px) calc(17.64% - -12.94px),calc(76.79% - 10.72px) calc(7.78% - -16.89px),calc(69.27% - 7.71px) calc(14.95% - -14.02px),calc(71.29% - 8.52px) calc(4.76% - -18.1px),calc(64.72% - 5.89px) calc(12.81% - -14.88px),calc(65.45% - 6.18px) calc(2.45% - -19.02px),calc(59.95% - 3.98px) calc(11.26% - -15.5px),calc(59.37% - 3.75px) calc(0.89% - -19.65px),calc(55.01% - 2.01px) calc(10.32% - -15.87px),calc(53.14% - 1.26px) calc(0.1% - -19.96px),calc(50% - 0px) calc(10% - -16px),calc(46.86% - -1.26px) calc(0.1% - -19.96px),calc(44.99% - -2.01px) calc(10.32% - -15.87px),calc(40.63% - -3.75px) calc(0.89% - -19.65px),calc(40.05% - -3.98px) calc(11.26% - -15.5px),calc(34.55% - -6.18px) calc(2.45% - -19.02px),calc(35.28% - -5.89px) calc(12.81% - -14.88px),calc(28.71% - -8.52px) calc(4.76% - -18.1px),calc(30.73% - -7.71px) calc(14.95% - -14.02px),calc(23.21% - -10.72px) calc(7.78% - -16.89px),calc(26.49% - -9.4px) calc(17.64% - -12.94px),calc(18.13% - -12.75px) calc(11.47% - -15.41px),calc(22.62% - -10.95px) calc(20.84% - -11.66px),calc(13.55% - -14.58px) calc(15.77% - -13.69px),calc(19.18% - -12.33px) calc(24.5% - -10.2px),calc(9.55% - -16.18px) calc(20.61% - -11.76px),calc(16.23% - -13.51px) calc(28.57% - -8.57px),calc(6.18% - -17.53px) calc(25.91% - -9.64px),calc(13.81% - -14.48px) calc(32.97% - -6.81px),calc(3.51% - -18.6px) calc(31.59% - -7.36px),calc(11.96% - -15.22px) calc(37.64% - -4.94px),calc(1.57% - -19.37px) calc(37.57% - -4.97px),calc(10.71% - -15.72px) calc(42.5% - -3px),calc(0.39% - -19.84px) calc(43.73% - -2.51px),calc(10.08% - -15.97px) calc(47.49% - -1px),calc(0% - -20px) calc(50% - 0px),calc(10.08% - -15.97px) calc(52.51% - 1px),calc(0.39% - -19.84px) calc(56.27% - 2.51px),calc(10.71% - -15.72px) calc(57.5% - 3px),calc(1.57% - -19.37px) calc(62.43% - 4.97px),calc(11.96% - -15.22px) calc(62.36% - 4.94px),calc(3.51% - -18.6px) calc(68.41% - 7.36px),calc(13.81% - -14.48px) calc(67.03% - 6.81px),calc(6.18% - -17.53px) calc(74.09% - 9.64px),calc(16.23% - -13.51px) calc(71.43% - 8.57px),calc(9.55% - -16.18px) calc(79.39% - 11.76px),calc(19.18% - -12.33px) calc(75.5% - 10.2px),calc(13.55% - -14.58px) calc(84.23% - 13.69px),calc(22.62% - -10.95px) calc(79.16% - 11.66px),calc(18.13% - -12.75px) calc(88.53% - 15.41px),calc(26.49% - -9.4px) calc(82.36% - 12.94px),calc(23.21% - -10.72px) calc(92.22% - 16.89px),calc(30.73% - -7.71px) calc(85.05% - 14.02px),calc(28.71% - -8.52px) calc(95.24% - 18.1px),calc(35.28% - -5.89px) calc(87.19% - 14.88px),calc(34.55% - -6.18px) calc(97.55% - 19.02px),calc(40.05% - -3.98px) calc(88.74% - 15.5px),calc(40.63% - -3.75px) calc(99.11% - 19.65px),calc(44.99% - -2.01px) calc(89.68% - 15.87px),calc(46.86% - -1.26px) calc(99.9% - 19.96px),calc(50% - 0px) calc(90% - 16px),calc(53.14% - 1.26px) calc(99.9% - 19.96px),calc(55.01% - 2.01px) calc(89.68% - 15.87px),calc(59.37% - 3.75px) calc(99.11% - 19.65px),calc(59.95% - 3.98px) calc(88.74% - 15.5px),calc(65.45% - 6.18px) calc(97.55% - 19.02px),calc(64.72% - 5.89px) calc(87.19% - 14.88px),calc(71.29% - 8.52px) calc(95.24% - 18.1px),calc(69.27% - 7.71px) calc(85.05% - 14.02px),calc(76.79% - 10.72px) calc(92.22% - 16.89px),calc(73.51% - 9.4px) calc(82.36% - 12.94px),calc(81.87% - 12.75px) calc(88.53% - 15.41px),calc(77.38% - 10.95px) calc(79.16% - 11.66px),calc(86.45% - 14.58px) calc(84.23% - 13.69px),calc(80.82% - 12.33px) calc(75.5% - 10.2px),calc(90.45% - 16.18px) calc(79.39% - 11.76px),calc(83.77% - 13.51px) calc(71.43% - 8.57px),calc(93.82% - 17.53px) calc(74.09% - 9.64px),calc(86.19% - 14.48px) calc(67.03% - 6.81px),calc(96.49% - 18.6px) calc(68.41% - 7.36px),calc(88.04% - 15.22px) calc(62.36% - 4.94px),calc(98.43% - 19.37px) calc(62.43% - 4.97px),calc(89.29% - 15.72px) calc(57.5% - 3px),calc(99.61% - 19.84px) calc(56.27% - 2.51px),calc(89.92% - 15.97px) calc(52.51% - 1px),calc(100% - 20px) calc(50% - 0px));
}
/* 3d */
/* HTML: <div class="3d-zig-zag-edge"></div> */
.zig-zag-3d-edge {
--s: 70px; /* control the size */
--a: 90deg; /* control the angle */
--d: 20px; /* the depth */
height: 280px;
width: 100%;
background:
conic-gradient(from calc(var(--a)/-2) at 50% calc(100% - var(--d)),
#0008,#0000 1deg calc(var(--a) - 1deg),#0004 var(--a) calc(180deg + var(--a)/2),#0008 0)
50%/var(--s) #78C0A8; /* the main color */
mask:
conic-gradient(from calc(var(--a)/-2) at bottom,
#0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a)) 50%/var(--s);
}
/* concave */
.curved-edge {
--c: 70px; /* control the curvature (works with percentage) */
aspect-ratio: 1;
/* you can also update the 60% */
mask: radial-gradient(60% var(--c) at 50% var(--c),#0000 calc(100% - 2px),#000) 0 calc(-1*var(--c));
background: #40C0CB;
}