-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Expand file tree
/
Copy pathcorner-shape-notch-squircle-outset-ref.html
More file actions
31 lines (31 loc) · 15.9 KB
/
Copy pathcorner-shape-notch-squircle-outset-ref.html
File metadata and controls
31 lines (31 loc) · 15.9 KB
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS Borders and Box Decorations 4: mixed notch + squircle corners — reference</title>
<style>
body { margin: 0; background: white; }
.row { display: flex; gap: 60px; padding: 40px; }
.cell { position: relative; width: 100px; height: 100px; }
.layer { position: absolute; inset: -50px; }
.clipbox { position: absolute; overflow: hidden; }
.clipbox > div { position: absolute; }
</style>
</head>
<body>
<div class="row">
<div class="cell">
<div class="layer" style="background:blue;clip-path:polygon(125.00px 40.00px, 126.89px 40.00px, 128.71px 40.00px, 130.46px 40.01px, 132.14px 40.02px, 133.75px 40.05px, 135.31px 40.08px, 136.80px 40.13px, 138.23px 40.20px, 139.60px 40.28px, 140.92px 40.39px, 142.18px 40.52px, 143.38px 40.68px, 144.54px 40.86px, 145.65px 41.08px, 146.71px 41.34px, 147.73px 41.63px, 148.70px 41.96px, 149.63px 42.33px, 150.52px 42.74px, 151.37px 43.21px, 152.19px 43.72px, 152.97px 44.28px, 153.71px 44.90px, 154.43px 45.57px, 155.10px 46.29px, 155.72px 47.03px, 156.28px 47.81px, 156.79px 48.63px, 157.26px 49.48px, 157.67px 50.37px, 158.04px 51.30px, 158.37px 52.27px, 158.66px 53.29px, 158.92px 54.35px, 159.14px 55.46px, 159.32px 56.62px, 159.48px 57.82px, 159.61px 59.08px, 159.72px 60.40px, 159.80px 61.77px, 159.87px 63.20px, 159.92px 64.69px, 159.95px 66.25px, 159.98px 67.86px, 159.99px 69.54px, 160.00px 71.29px, 160.00px 73.11px, 160.00px 75.00px, 160.00px 135.00px, 135.00px 135.00px, 135.00px 160.00px, 75.00px 160.00px, 73.11px 160.00px, 71.29px 160.00px, 69.54px 159.99px, 67.86px 159.98px, 66.25px 159.95px, 64.69px 159.92px, 63.20px 159.87px, 61.77px 159.80px, 60.40px 159.72px, 59.08px 159.61px, 57.82px 159.48px, 56.62px 159.32px, 55.46px 159.14px, 54.35px 158.92px, 53.29px 158.66px, 52.27px 158.37px, 51.30px 158.04px, 50.37px 157.67px, 49.48px 157.26px, 48.63px 156.79px, 47.81px 156.28px, 47.03px 155.72px, 46.29px 155.10px, 45.57px 154.43px, 44.90px 153.71px, 44.28px 152.97px, 43.72px 152.19px, 43.21px 151.37px, 42.74px 150.52px, 42.33px 149.63px, 41.96px 148.70px, 41.63px 147.73px, 41.34px 146.71px, 41.08px 145.65px, 40.86px 144.54px, 40.68px 143.38px, 40.52px 142.18px, 40.39px 140.92px, 40.28px 139.60px, 40.20px 138.23px, 40.13px 136.80px, 40.08px 135.31px, 40.05px 133.75px, 40.02px 132.14px, 40.01px 130.46px, 40.00px 128.71px, 40.00px 126.89px, 40.00px 125.00px, 40.00px 65.00px, 65.00px 65.00px, 65.00px 40.00px)"></div>
<div class="layer" style="background:green;clip-path:polygon(125.00px 50.00px, 126.35px 50.00px, 127.65px 50.00px, 128.90px 50.01px, 130.10px 50.02px, 131.25px 50.03px, 132.36px 50.06px, 133.43px 50.09px, 134.45px 50.14px, 135.43px 50.20px, 136.37px 50.28px, 137.27px 50.37px, 138.13px 50.48px, 138.96px 50.62px, 139.75px 50.77px, 140.51px 50.96px, 141.23px 51.16px, 141.93px 51.40px, 142.59px 51.66px, 143.23px 51.96px, 143.84px 52.29px, 144.42px 52.65px, 144.98px 53.06px, 145.51px 53.50px, 146.02px 53.98px, 146.50px 54.49px, 146.94px 55.02px, 147.35px 55.58px, 147.71px 56.16px, 148.04px 56.77px, 148.34px 57.41px, 148.60px 58.07px, 148.84px 58.77px, 149.04px 59.49px, 149.23px 60.25px, 149.38px 61.04px, 149.52px 61.87px, 149.63px 62.73px, 149.72px 63.63px, 149.80px 64.57px, 149.86px 65.55px, 149.91px 66.57px, 149.94px 67.64px, 149.97px 68.75px, 149.98px 69.90px, 149.99px 71.10px, 150.00px 72.35px, 150.00px 73.65px, 150.00px 75.00px, 150.00px 125.00px, 125.00px 125.00px, 125.00px 150.00px, 75.00px 150.00px, 73.65px 150.00px, 72.35px 150.00px, 71.10px 149.99px, 69.90px 149.98px, 68.75px 149.97px, 67.64px 149.94px, 66.57px 149.91px, 65.55px 149.86px, 64.57px 149.80px, 63.63px 149.72px, 62.73px 149.63px, 61.87px 149.52px, 61.04px 149.38px, 60.25px 149.23px, 59.49px 149.04px, 58.77px 148.84px, 58.07px 148.60px, 57.41px 148.34px, 56.77px 148.04px, 56.16px 147.71px, 55.58px 147.35px, 55.02px 146.94px, 54.49px 146.50px, 53.98px 146.02px, 53.50px 145.51px, 53.06px 144.98px, 52.65px 144.42px, 52.29px 143.84px, 51.96px 143.23px, 51.66px 142.59px, 51.40px 141.93px, 51.16px 141.23px, 50.96px 140.51px, 50.77px 139.75px, 50.62px 138.96px, 50.48px 138.13px, 50.37px 137.27px, 50.28px 136.37px, 50.20px 135.43px, 50.14px 134.45px, 50.09px 133.43px, 50.06px 132.36px, 50.03px 131.25px, 50.02px 130.10px, 50.01px 128.90px, 50.00px 127.65px, 50.00px 126.35px, 50.00px 125.00px, 50.00px 75.00px, 75.00px 75.00px, 75.00px 50.00px)"></div>
</div>
<div class="cell">
<div class="layer" style="background:orange;clip-path:polygon(126.49px 34.07px, 126.49px 34.07px, 128.62px 34.07px, 130.67px 34.07px, 132.64px 34.08px, 134.54px 34.10px, 136.36px 34.12px, 138.11px 34.16px, 139.79px 34.22px, 141.40px 34.29px, 142.94px 34.39px, 144.43px 34.51px, 145.85px 34.65px, 147.21px 34.83px, 148.51px 35.04px, 149.76px 35.29px, 150.96px 35.58px, 152.10px 35.90px, 153.20px 36.28px, 154.24px 36.69px, 155.25px 37.16px, 156.21px 37.68px, 157.13px 38.26px, 158.00px 38.89px, 158.85px 39.59px, 159.66px 40.34px, 160.41px 41.15px, 161.11px 42.00px, 161.74px 42.87px, 162.32px 43.79px, 162.84px 44.75px, 163.31px 45.76px, 163.72px 46.80px, 164.10px 47.90px, 164.42px 49.04px, 164.71px 50.24px, 164.96px 51.49px, 165.17px 52.79px, 165.35px 54.15px, 165.49px 55.57px, 165.61px 57.06px, 165.71px 58.60px, 165.78px 60.21px, 165.84px 61.89px, 165.88px 63.64px, 165.90px 65.46px, 165.92px 67.36px, 165.93px 69.33px, 165.93px 71.38px, 165.93px 73.51px, 165.93px 73.51px, 166.00px 141.00px, 166.00px 141.00px, 141.00px 141.00px, 141.00px 166.00px, 141.00px 166.00px, 73.51px 165.93px, 73.51px 165.93px, 71.38px 165.93px, 69.33px 165.93px, 67.36px 165.92px, 65.46px 165.90px, 63.64px 165.88px, 61.89px 165.84px, 60.21px 165.78px, 58.60px 165.71px, 57.06px 165.61px, 55.57px 165.49px, 54.15px 165.35px, 52.79px 165.17px, 51.49px 164.96px, 50.24px 164.71px, 49.04px 164.42px, 47.90px 164.10px, 46.80px 163.72px, 45.76px 163.31px, 44.75px 162.84px, 43.79px 162.32px, 42.87px 161.74px, 42.00px 161.11px, 41.15px 160.41px, 40.34px 159.66px, 39.59px 158.85px, 38.89px 158.00px, 38.26px 157.13px, 37.68px 156.21px, 37.16px 155.25px, 36.69px 154.24px, 36.28px 153.20px, 35.90px 152.10px, 35.58px 150.96px, 35.29px 149.76px, 35.04px 148.51px, 34.83px 147.21px, 34.65px 145.85px, 34.51px 144.43px, 34.39px 142.94px, 34.29px 141.40px, 34.22px 139.79px, 34.16px 138.11px, 34.12px 136.36px, 34.10px 134.54px, 34.08px 132.64px, 34.07px 130.67px, 34.07px 128.62px, 34.07px 126.49px, 34.07px 126.49px, 34.00px 59.00px, 34.00px 59.00px, 59.00px 59.00px, 59.00px 34.00px, 59.00px 34.00px)"></div>
<div class="layer" style="background:white;clip-path:polygon(125.93px 40.04px, 125.93px 40.04px, 127.77px 40.04px, 129.54px 40.05px, 131.24px 40.05px, 132.87px 40.07px, 134.44px 40.09px, 135.95px 40.12px, 137.40px 40.17px, 138.79px 40.23px, 140.13px 40.32px, 141.40px 40.42px, 142.63px 40.55px, 143.81px 40.70px, 144.93px 40.88px, 146.01px 41.10px, 147.04px 41.34px, 148.03px 41.63px, 148.97px 41.95px, 149.87px 42.31px, 150.74px 42.71px, 151.57px 43.16px, 152.36px 43.66px, 153.12px 44.20px, 153.85px 44.80px, 154.54px 45.46px, 155.20px 46.15px, 155.80px 46.88px, 156.34px 47.64px, 156.84px 48.43px, 157.29px 49.26px, 157.69px 50.13px, 158.05px 51.03px, 158.37px 51.97px, 158.66px 52.96px, 158.90px 53.99px, 159.12px 55.07px, 159.30px 56.19px, 159.45px 57.37px, 159.58px 58.60px, 159.68px 59.87px, 159.77px 61.21px, 159.83px 62.60px, 159.88px 64.05px, 159.91px 65.56px, 159.93px 67.13px, 159.95px 68.76px, 159.95px 70.46px, 159.96px 72.23px, 159.96px 74.07px, 159.96px 74.07px, 160.00px 135.00px, 160.00px 135.00px, 135.00px 135.00px, 135.00px 160.00px, 135.00px 160.00px, 74.07px 159.96px, 74.07px 159.96px, 72.23px 159.96px, 70.46px 159.95px, 68.76px 159.95px, 67.13px 159.93px, 65.56px 159.91px, 64.05px 159.88px, 62.60px 159.83px, 61.21px 159.77px, 59.87px 159.68px, 58.60px 159.58px, 57.37px 159.45px, 56.19px 159.30px, 55.07px 159.12px, 53.99px 158.90px, 52.96px 158.66px, 51.97px 158.37px, 51.03px 158.05px, 50.13px 157.69px, 49.26px 157.29px, 48.43px 156.84px, 47.64px 156.34px, 46.88px 155.80px, 46.15px 155.20px, 45.46px 154.54px, 44.80px 153.85px, 44.20px 153.12px, 43.66px 152.36px, 43.16px 151.57px, 42.71px 150.74px, 42.31px 149.87px, 41.95px 148.97px, 41.63px 148.03px, 41.34px 147.04px, 41.10px 146.01px, 40.88px 144.93px, 40.70px 143.81px, 40.55px 142.63px, 40.42px 141.40px, 40.32px 140.13px, 40.23px 138.79px, 40.17px 137.40px, 40.12px 135.95px, 40.09px 134.44px, 40.07px 132.87px, 40.05px 131.24px, 40.05px 129.54px, 40.04px 127.77px, 40.04px 125.93px, 40.04px 125.93px, 40.00px 65.00px, 40.00px 65.00px, 65.00px 65.00px, 65.00px 40.00px, 65.00px 40.00px)"></div>
<div class="layer" style="background:green;clip-path:polygon(125.00px 50.00px, 126.35px 50.00px, 127.65px 50.00px, 128.90px 50.01px, 130.10px 50.02px, 131.25px 50.03px, 132.36px 50.06px, 133.43px 50.09px, 134.45px 50.14px, 135.43px 50.20px, 136.37px 50.28px, 137.27px 50.37px, 138.13px 50.48px, 138.96px 50.62px, 139.75px 50.77px, 140.51px 50.96px, 141.23px 51.16px, 141.93px 51.40px, 142.59px 51.66px, 143.23px 51.96px, 143.84px 52.29px, 144.42px 52.65px, 144.98px 53.06px, 145.51px 53.50px, 146.02px 53.98px, 146.50px 54.49px, 146.94px 55.02px, 147.35px 55.58px, 147.71px 56.16px, 148.04px 56.77px, 148.34px 57.41px, 148.60px 58.07px, 148.84px 58.77px, 149.04px 59.49px, 149.23px 60.25px, 149.38px 61.04px, 149.52px 61.87px, 149.63px 62.73px, 149.72px 63.63px, 149.80px 64.57px, 149.86px 65.55px, 149.91px 66.57px, 149.94px 67.64px, 149.97px 68.75px, 149.98px 69.90px, 149.99px 71.10px, 150.00px 72.35px, 150.00px 73.65px, 150.00px 75.00px, 150.00px 125.00px, 125.00px 125.00px, 125.00px 150.00px, 75.00px 150.00px, 73.65px 150.00px, 72.35px 150.00px, 71.10px 149.99px, 69.90px 149.98px, 68.75px 149.97px, 67.64px 149.94px, 66.57px 149.91px, 65.55px 149.86px, 64.57px 149.80px, 63.63px 149.72px, 62.73px 149.63px, 61.87px 149.52px, 61.04px 149.38px, 60.25px 149.23px, 59.49px 149.04px, 58.77px 148.84px, 58.07px 148.60px, 57.41px 148.34px, 56.77px 148.04px, 56.16px 147.71px, 55.58px 147.35px, 55.02px 146.94px, 54.49px 146.50px, 53.98px 146.02px, 53.50px 145.51px, 53.06px 144.98px, 52.65px 144.42px, 52.29px 143.84px, 51.96px 143.23px, 51.66px 142.59px, 51.40px 141.93px, 51.16px 141.23px, 50.96px 140.51px, 50.77px 139.75px, 50.62px 138.96px, 50.48px 138.13px, 50.37px 137.27px, 50.28px 136.37px, 50.20px 135.43px, 50.14px 134.45px, 50.09px 133.43px, 50.06px 132.36px, 50.03px 131.25px, 50.02px 130.10px, 50.01px 128.90px, 50.00px 127.65px, 50.00px 126.35px, 50.00px 125.00px, 50.00px 75.00px, 75.00px 75.00px, 75.00px 50.00px)"></div>
</div>
<div class="cell">
<div class="layer" style="background:green;clip-path:polygon(125.00px 50.00px, 126.35px 50.00px, 127.65px 50.00px, 128.90px 50.01px, 130.10px 50.02px, 131.25px 50.03px, 132.36px 50.06px, 133.43px 50.09px, 134.45px 50.14px, 135.43px 50.20px, 136.37px 50.28px, 137.27px 50.37px, 138.13px 50.48px, 138.96px 50.62px, 139.75px 50.77px, 140.51px 50.96px, 141.23px 51.16px, 141.93px 51.40px, 142.59px 51.66px, 143.23px 51.96px, 143.84px 52.29px, 144.42px 52.65px, 144.98px 53.06px, 145.51px 53.50px, 146.02px 53.98px, 146.50px 54.49px, 146.94px 55.02px, 147.35px 55.58px, 147.71px 56.16px, 148.04px 56.77px, 148.34px 57.41px, 148.60px 58.07px, 148.84px 58.77px, 149.04px 59.49px, 149.23px 60.25px, 149.38px 61.04px, 149.52px 61.87px, 149.63px 62.73px, 149.72px 63.63px, 149.80px 64.57px, 149.86px 65.55px, 149.91px 66.57px, 149.94px 67.64px, 149.97px 68.75px, 149.98px 69.90px, 149.99px 71.10px, 150.00px 72.35px, 150.00px 73.65px, 150.00px 75.00px, 150.00px 125.00px, 125.00px 125.00px, 125.00px 150.00px, 75.00px 150.00px, 73.65px 150.00px, 72.35px 150.00px, 71.10px 149.99px, 69.90px 149.98px, 68.75px 149.97px, 67.64px 149.94px, 66.57px 149.91px, 65.55px 149.86px, 64.57px 149.80px, 63.63px 149.72px, 62.73px 149.63px, 61.87px 149.52px, 61.04px 149.38px, 60.25px 149.23px, 59.49px 149.04px, 58.77px 148.84px, 58.07px 148.60px, 57.41px 148.34px, 56.77px 148.04px, 56.16px 147.71px, 55.58px 147.35px, 55.02px 146.94px, 54.49px 146.50px, 53.98px 146.02px, 53.50px 145.51px, 53.06px 144.98px, 52.65px 144.42px, 52.29px 143.84px, 51.96px 143.23px, 51.66px 142.59px, 51.40px 141.93px, 51.16px 141.23px, 50.96px 140.51px, 50.77px 139.75px, 50.62px 138.96px, 50.48px 138.13px, 50.37px 137.27px, 50.28px 136.37px, 50.20px 135.43px, 50.14px 134.45px, 50.09px 133.43px, 50.06px 132.36px, 50.03px 131.25px, 50.02px 130.10px, 50.01px 128.90px, 50.00px 127.65px, 50.00px 126.35px, 50.00px 125.00px, 50.00px 75.00px, 75.00px 75.00px, 75.00px 50.00px)"></div>
<div class="clipbox" style="inset:4px"><div style="inset:-4px;background:orange;clip-path:polygon(74.63px 3.98px, 75.78px 3.98px, 76.89px 3.98px, 77.96px 3.99px, 78.99px 4.00px, 79.98px 4.01px, 80.93px 4.03px, 81.84px 4.06px, 82.71px 4.10px, 83.55px 4.15px, 84.35px 4.22px, 85.12px 4.30px, 85.86px 4.40px, 86.57px 4.51px, 87.25px 4.65px, 87.90px 4.80px, 88.52px 4.98px, 89.11px 5.18px, 89.68px 5.41px, 90.22px 5.66px, 90.74px 5.94px, 91.24px 6.25px, 91.72px 6.60px, 92.18px 6.97px, 92.61px 7.39px, 93.03px 7.82px, 93.40px 8.28px, 93.75px 8.76px, 94.06px 9.26px, 94.34px 9.78px, 94.59px 10.32px, 94.82px 10.89px, 95.02px 11.48px, 95.20px 12.10px, 95.35px 12.75px, 95.49px 13.43px, 95.60px 14.14px, 95.70px 14.88px, 95.78px 15.65px, 95.85px 16.45px, 95.90px 17.29px, 95.94px 18.16px, 95.97px 19.07px, 95.99px 20.02px, 96.00px 21.01px, 96.01px 22.04px, 96.02px 23.11px, 96.02px 24.22px, 96.02px 25.37px, 96.00px 71.00px, 71.00px 71.00px, 71.00px 96.00px, 25.37px 96.02px, 24.22px 96.02px, 23.11px 96.02px, 22.04px 96.01px, 21.01px 96.00px, 20.02px 95.99px, 19.07px 95.97px, 18.16px 95.94px, 17.29px 95.90px, 16.45px 95.85px, 15.65px 95.78px, 14.88px 95.70px, 14.14px 95.60px, 13.43px 95.49px, 12.75px 95.35px, 12.10px 95.20px, 11.48px 95.02px, 10.89px 94.82px, 10.32px 94.59px, 9.78px 94.34px, 9.26px 94.06px, 8.76px 93.75px, 8.28px 93.40px, 7.82px 93.03px, 7.39px 92.61px, 6.97px 92.18px, 6.60px 91.72px, 6.25px 91.24px, 5.94px 90.74px, 5.66px 90.22px, 5.41px 89.68px, 5.18px 89.11px, 4.98px 88.52px, 4.80px 87.90px, 4.65px 87.25px, 4.51px 86.57px, 4.40px 85.86px, 4.30px 85.12px, 4.22px 84.35px, 4.15px 83.55px, 4.10px 82.71px, 4.06px 81.84px, 4.03px 80.93px, 4.01px 79.98px, 4.00px 78.99px, 3.99px 77.96px, 3.98px 76.89px, 3.98px 75.78px, 3.98px 74.63px, 4.00px 29.00px, 29.00px 29.00px, 29.00px 4.00px)"></div></div>
<div class="clipbox" style="inset:10px"><div style="inset:-10px;background:green;clip-path:polygon(74.07px 9.96px, 74.93px 9.96px, 75.76px 9.96px, 76.56px 9.96px, 77.32px 9.97px, 78.06px 9.98px, 78.77px 9.99px, 79.45px 10.02px, 80.10px 10.05px, 80.73px 10.08px, 81.33px 10.13px, 81.91px 10.19px, 82.46px 10.27px, 82.99px 10.35px, 83.49px 10.45px, 83.98px 10.57px, 84.44px 10.70px, 84.88px 10.85px, 85.31px 11.02px, 85.72px 11.21px, 86.10px 11.42px, 86.48px 11.65px, 86.83px 11.91px, 87.17px 12.19px, 87.50px 12.50px, 87.81px 12.83px, 88.09px 13.17px, 88.35px 13.52px, 88.58px 13.90px, 88.79px 14.28px, 88.98px 14.69px, 89.15px 15.12px, 89.30px 15.56px, 89.43px 16.02px, 89.55px 16.51px, 89.65px 17.01px, 89.73px 17.54px, 89.81px 18.09px, 89.87px 18.67px, 89.92px 19.27px, 89.95px 19.90px, 89.98px 20.55px, 90.01px 21.23px, 90.02px 21.94px, 90.03px 22.68px, 90.04px 23.44px, 90.04px 24.24px, 90.04px 25.07px, 90.04px 25.93px, 90.00px 65.00px, 65.00px 65.00px, 65.00px 90.00px, 25.93px 90.04px, 25.07px 90.04px, 24.24px 90.04px, 23.44px 90.04px, 22.68px 90.03px, 21.94px 90.02px, 21.23px 90.01px, 20.55px 89.98px, 19.90px 89.95px, 19.27px 89.92px, 18.67px 89.87px, 18.09px 89.81px, 17.54px 89.73px, 17.01px 89.65px, 16.51px 89.55px, 16.02px 89.43px, 15.56px 89.30px, 15.12px 89.15px, 14.69px 88.98px, 14.28px 88.79px, 13.90px 88.58px, 13.52px 88.35px, 13.17px 88.09px, 12.83px 87.81px, 12.50px 87.50px, 12.19px 87.17px, 11.91px 86.83px, 11.65px 86.48px, 11.42px 86.10px, 11.21px 85.72px, 11.02px 85.31px, 10.85px 84.88px, 10.70px 84.44px, 10.57px 83.98px, 10.45px 83.49px, 10.35px 82.99px, 10.27px 82.46px, 10.19px 81.91px, 10.13px 81.33px, 10.08px 80.73px, 10.05px 80.10px, 10.02px 79.45px, 9.99px 78.77px, 9.98px 78.06px, 9.97px 77.32px, 9.96px 76.56px, 9.96px 75.76px, 9.96px 74.93px, 9.96px 74.07px, 10.00px 35.00px, 35.00px 35.00px, 35.00px 10.00px)"></div></div>
</div>
</div>
</body>