-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Expand file tree
/
Copy pathcorner-shape-bevel-round-scoop-square-outset-ref.html
More file actions
29 lines (29 loc) · 16.7 KB
/
Copy pathcorner-shape-bevel-round-scoop-square-outset-ref.html
File metadata and controls
29 lines (29 loc) · 16.7 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS Borders and Box Decorations 4: mixed bevel + round + scoop + square 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; }
</style>
</head>
<body>
<div class="row">
<div class="cell">
<div class="layer" style="background:blue;clip-path:polygon(125.93px 40.04px, 125.93px 40.04px, 126.63px 40.05px, 127.37px 40.08px, 128.16px 40.13px, 128.99px 40.20px, 129.86px 40.29px, 130.77px 40.41px, 131.71px 40.57px, 132.68px 40.75px, 133.68px 40.97px, 134.70px 41.23px, 135.74px 41.52px, 136.81px 41.86px, 137.89px 42.24px, 138.98px 42.67px, 140.08px 43.14px, 141.19px 43.67px, 142.31px 44.25px, 143.42px 44.89px, 144.54px 45.58px, 145.65px 46.34px, 146.75px 47.16px, 147.85px 48.04px, 148.93px 48.99px, 149.99px 50.01px, 151.01px 51.07px, 151.96px 52.15px, 152.84px 53.25px, 153.66px 54.35px, 154.42px 55.46px, 155.11px 56.58px, 155.75px 57.69px, 156.33px 58.81px, 156.86px 59.92px, 157.33px 61.02px, 157.76px 62.11px, 158.14px 63.19px, 158.48px 64.26px, 158.77px 65.30px, 159.03px 66.32px, 159.25px 67.32px, 159.43px 68.29px, 159.59px 69.23px, 159.71px 70.14px, 159.80px 71.01px, 159.87px 71.84px, 159.92px 72.63px, 159.95px 73.37px, 159.96px 74.07px, 159.96px 74.07px, 160.00px 135.00px, 150.00px 135.00px, 149.69px 135.00px, 149.37px 135.02px, 149.02px 135.04px, 148.65px 135.07px, 148.27px 135.11px, 147.87px 135.16px, 147.45px 135.23px, 147.03px 135.31px, 146.59px 135.41px, 146.14px 135.52px, 145.67px 135.65px, 145.21px 135.80px, 144.73px 135.97px, 144.25px 136.16px, 143.76px 136.37px, 143.27px 136.60px, 142.78px 136.86px, 142.29px 137.14px, 141.80px 137.44px, 141.31px 137.77px, 140.82px 138.14px, 140.34px 138.52px, 139.86px 138.94px, 139.39px 139.39px, 138.94px 139.86px, 138.52px 140.34px, 138.14px 140.82px, 137.77px 141.31px, 137.44px 141.80px, 137.14px 142.29px, 136.86px 142.78px, 136.60px 143.27px, 136.37px 143.76px, 136.16px 144.25px, 135.97px 144.73px, 135.80px 145.21px, 135.65px 145.67px, 135.52px 146.14px, 135.41px 146.59px, 135.31px 147.03px, 135.23px 147.45px, 135.16px 147.87px, 135.11px 148.27px, 135.07px 148.65px, 135.04px 149.02px, 135.02px 149.37px, 135.00px 149.69px, 135.00px 150.00px, 135.00px 160.00px, 75.00px 160.00px, 75.00px 160.00px, 40.00px 160.00px, 40.00px 125.00px, 40.00px 125.00px, 40.00px 70.86px, 42.81px 68.05px, 45.61px 65.25px, 48.42px 62.44px, 51.22px 59.64px, 54.03px 56.83px, 56.83px 54.03px, 59.64px 51.22px, 62.44px 48.42px, 65.25px 45.61px, 68.05px 42.81px, 70.86px 40.00px)"></div>
<div class="layer" style="background:green;clip-path:polygon(125.00px 50.00px, 125.51px 50.01px, 126.06px 50.03px, 126.64px 50.06px, 127.25px 50.11px, 127.89px 50.18px, 128.55px 50.27px, 129.24px 50.38px, 129.96px 50.52px, 130.69px 50.68px, 131.44px 50.87px, 132.21px 51.09px, 132.99px 51.33px, 133.78px 51.61px, 134.59px 51.93px, 135.40px 52.28px, 136.21px 52.67px, 137.03px 53.09px, 137.85px 53.56px, 138.67px 54.07px, 139.49px 54.62px, 140.30px 55.23px, 141.10px 55.87px, 141.90px 56.57px, 142.68px 57.32px, 143.43px 58.10px, 144.13px 58.90px, 144.77px 59.70px, 145.38px 60.51px, 145.93px 61.33px, 146.44px 62.15px, 146.91px 62.97px, 147.33px 63.79px, 147.72px 64.60px, 148.07px 65.41px, 148.39px 66.22px, 148.67px 67.01px, 148.91px 67.79px, 149.13px 68.56px, 149.32px 69.31px, 149.48px 70.04px, 149.62px 70.76px, 149.73px 71.45px, 149.82px 72.11px, 149.89px 72.75px, 149.94px 73.36px, 149.97px 73.94px, 149.99px 74.49px, 150.00px 75.00px, 150.00px 125.00px, 149.49px 125.01px, 148.94px 125.03px, 148.36px 125.06px, 147.75px 125.11px, 147.11px 125.18px, 146.45px 125.27px, 145.76px 125.38px, 145.04px 125.52px, 144.31px 125.68px, 143.56px 125.87px, 142.79px 126.09px, 142.01px 126.33px, 141.22px 126.61px, 140.41px 126.93px, 139.60px 127.28px, 138.79px 127.67px, 137.97px 128.09px, 137.15px 128.56px, 136.33px 129.07px, 135.51px 129.62px, 134.70px 130.23px, 133.90px 130.87px, 133.10px 131.57px, 132.32px 132.32px, 131.57px 133.10px, 130.87px 133.90px, 130.23px 134.70px, 129.62px 135.51px, 129.07px 136.33px, 128.56px 137.15px, 128.09px 137.97px, 127.67px 138.79px, 127.28px 139.60px, 126.93px 140.41px, 126.61px 141.22px, 126.33px 142.01px, 126.09px 142.79px, 125.87px 143.56px, 125.68px 144.31px, 125.52px 145.04px, 125.38px 145.76px, 125.27px 146.45px, 125.18px 147.11px, 125.11px 147.75px, 125.06px 148.36px, 125.03px 148.94px, 125.01px 149.49px, 125.00px 150.00px, 75.00px 150.00px, 50.00px 150.00px, 50.00px 125.00px, 50.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, 127.30px 34.08px, 128.16px 34.11px, 129.08px 34.16px, 130.04px 34.25px, 131.05px 34.36px, 132.10px 34.50px, 133.19px 34.67px, 134.31px 34.89px, 135.47px 35.14px, 136.66px 35.44px, 137.87px 35.78px, 139.10px 36.17px, 140.35px 36.62px, 141.62px 37.11px, 142.89px 37.66px, 144.18px 38.27px, 145.47px 38.95px, 146.77px 39.69px, 148.06px 40.49px, 149.35px 41.37px, 150.63px 42.31px, 151.89px 43.34px, 153.15px 44.44px, 154.38px 45.62px, 155.56px 46.85px, 156.66px 48.11px, 157.69px 49.37px, 158.63px 50.65px, 159.51px 51.94px, 160.31px 53.23px, 161.05px 54.53px, 161.73px 55.82px, 162.34px 57.11px, 162.89px 58.38px, 163.38px 59.65px, 163.83px 60.90px, 164.22px 62.13px, 164.56px 63.34px, 164.86px 64.53px, 165.11px 65.69px, 165.33px 66.81px, 165.50px 67.90px, 165.64px 68.95px, 165.75px 69.96px, 165.84px 70.92px, 165.89px 71.84px, 165.92px 72.70px, 165.93px 73.51px, 165.93px 73.51px, 166.00px 141.00px, 150.00px 141.00px, 149.82px 141.00px, 149.62px 141.01px, 149.41px 141.02px, 149.19px 141.04px, 148.96px 141.07px, 148.72px 141.10px, 148.47px 141.14px, 148.22px 141.19px, 147.95px 141.24px, 147.68px 141.31px, 147.40px 141.39px, 147.12px 141.48px, 146.84px 141.58px, 146.55px 141.69px, 146.26px 141.82px, 145.96px 141.96px, 145.67px 142.11px, 145.37px 142.28px, 145.08px 142.47px, 144.78px 142.66px, 144.49px 142.88px, 144.20px 143.11px, 143.92px 143.37px, 143.64px 143.64px, 143.37px 143.92px, 143.11px 144.20px, 142.88px 144.49px, 142.66px 144.78px, 142.47px 145.08px, 142.28px 145.37px, 142.11px 145.67px, 141.96px 145.96px, 141.82px 146.26px, 141.69px 146.55px, 141.58px 146.84px, 141.48px 147.12px, 141.39px 147.40px, 141.31px 147.68px, 141.24px 147.95px, 141.19px 148.22px, 141.14px 148.47px, 141.10px 148.72px, 141.07px 148.96px, 141.04px 149.19px, 141.02px 149.41px, 141.01px 149.62px, 141.00px 149.82px, 141.00px 150.00px, 141.00px 166.00px, 75.00px 166.00px, 75.00px 166.00px, 34.00px 166.00px, 34.00px 125.00px, 34.00px 125.00px, 34.00px 68.37px, 37.12px 65.25px, 40.25px 62.12px, 43.37px 59.00px, 46.50px 55.87px, 49.62px 52.75px, 52.75px 49.62px, 55.87px 46.50px, 59.00px 43.37px, 62.12px 40.25px, 65.25px 37.12px, 68.37px 34.00px)"></div>
<div class="layer" style="background:white;clip-path:polygon(125.93px 40.04px, 125.93px 40.04px, 126.63px 40.05px, 127.37px 40.08px, 128.16px 40.13px, 128.99px 40.20px, 129.86px 40.29px, 130.77px 40.41px, 131.71px 40.57px, 132.68px 40.75px, 133.68px 40.97px, 134.70px 41.23px, 135.74px 41.52px, 136.81px 41.86px, 137.89px 42.24px, 138.98px 42.67px, 140.08px 43.14px, 141.19px 43.67px, 142.31px 44.25px, 143.42px 44.89px, 144.54px 45.58px, 145.65px 46.34px, 146.75px 47.16px, 147.85px 48.04px, 148.93px 48.99px, 149.99px 50.01px, 151.01px 51.07px, 151.96px 52.15px, 152.84px 53.25px, 153.66px 54.35px, 154.42px 55.46px, 155.11px 56.58px, 155.75px 57.69px, 156.33px 58.81px, 156.86px 59.92px, 157.33px 61.02px, 157.76px 62.11px, 158.14px 63.19px, 158.48px 64.26px, 158.77px 65.30px, 159.03px 66.32px, 159.25px 67.32px, 159.43px 68.29px, 159.59px 69.23px, 159.71px 70.14px, 159.80px 71.01px, 159.87px 71.84px, 159.92px 72.63px, 159.95px 73.37px, 159.96px 74.07px, 159.96px 74.07px, 160.00px 135.00px, 150.00px 135.00px, 149.69px 135.00px, 149.37px 135.02px, 149.02px 135.04px, 148.65px 135.07px, 148.27px 135.11px, 147.87px 135.16px, 147.45px 135.23px, 147.03px 135.31px, 146.59px 135.41px, 146.14px 135.52px, 145.67px 135.65px, 145.21px 135.80px, 144.73px 135.97px, 144.25px 136.16px, 143.76px 136.37px, 143.27px 136.60px, 142.78px 136.86px, 142.29px 137.14px, 141.80px 137.44px, 141.31px 137.77px, 140.82px 138.14px, 140.34px 138.52px, 139.86px 138.94px, 139.39px 139.39px, 138.94px 139.86px, 138.52px 140.34px, 138.14px 140.82px, 137.77px 141.31px, 137.44px 141.80px, 137.14px 142.29px, 136.86px 142.78px, 136.60px 143.27px, 136.37px 143.76px, 136.16px 144.25px, 135.97px 144.73px, 135.80px 145.21px, 135.65px 145.67px, 135.52px 146.14px, 135.41px 146.59px, 135.31px 147.03px, 135.23px 147.45px, 135.16px 147.87px, 135.11px 148.27px, 135.07px 148.65px, 135.04px 149.02px, 135.02px 149.37px, 135.00px 149.69px, 135.00px 150.00px, 135.00px 160.00px, 75.00px 160.00px, 75.00px 160.00px, 40.00px 160.00px, 40.00px 125.00px, 40.00px 125.00px, 40.00px 70.86px, 42.81px 68.05px, 45.61px 65.25px, 48.42px 62.44px, 51.22px 59.64px, 54.03px 56.83px, 56.83px 54.03px, 59.64px 51.22px, 62.44px 48.42px, 65.25px 45.61px, 68.05px 42.81px, 70.86px 40.00px)"></div>
<div class="layer" style="background:green;clip-path:polygon(125.00px 50.00px, 125.51px 50.01px, 126.06px 50.03px, 126.64px 50.06px, 127.25px 50.11px, 127.89px 50.18px, 128.55px 50.27px, 129.24px 50.38px, 129.96px 50.52px, 130.69px 50.68px, 131.44px 50.87px, 132.21px 51.09px, 132.99px 51.33px, 133.78px 51.61px, 134.59px 51.93px, 135.40px 52.28px, 136.21px 52.67px, 137.03px 53.09px, 137.85px 53.56px, 138.67px 54.07px, 139.49px 54.62px, 140.30px 55.23px, 141.10px 55.87px, 141.90px 56.57px, 142.68px 57.32px, 143.43px 58.10px, 144.13px 58.90px, 144.77px 59.70px, 145.38px 60.51px, 145.93px 61.33px, 146.44px 62.15px, 146.91px 62.97px, 147.33px 63.79px, 147.72px 64.60px, 148.07px 65.41px, 148.39px 66.22px, 148.67px 67.01px, 148.91px 67.79px, 149.13px 68.56px, 149.32px 69.31px, 149.48px 70.04px, 149.62px 70.76px, 149.73px 71.45px, 149.82px 72.11px, 149.89px 72.75px, 149.94px 73.36px, 149.97px 73.94px, 149.99px 74.49px, 150.00px 75.00px, 150.00px 125.00px, 149.49px 125.01px, 148.94px 125.03px, 148.36px 125.06px, 147.75px 125.11px, 147.11px 125.18px, 146.45px 125.27px, 145.76px 125.38px, 145.04px 125.52px, 144.31px 125.68px, 143.56px 125.87px, 142.79px 126.09px, 142.01px 126.33px, 141.22px 126.61px, 140.41px 126.93px, 139.60px 127.28px, 138.79px 127.67px, 137.97px 128.09px, 137.15px 128.56px, 136.33px 129.07px, 135.51px 129.62px, 134.70px 130.23px, 133.90px 130.87px, 133.10px 131.57px, 132.32px 132.32px, 131.57px 133.10px, 130.87px 133.90px, 130.23px 134.70px, 129.62px 135.51px, 129.07px 136.33px, 128.56px 137.15px, 128.09px 137.97px, 127.67px 138.79px, 127.28px 139.60px, 126.93px 140.41px, 126.61px 141.22px, 126.33px 142.01px, 126.09px 142.79px, 125.87px 143.56px, 125.68px 144.31px, 125.52px 145.04px, 125.38px 145.76px, 125.27px 146.45px, 125.18px 147.11px, 125.11px 147.75px, 125.06px 148.36px, 125.03px 148.94px, 125.01px 149.49px, 125.00px 150.00px, 75.00px 150.00px, 50.00px 150.00px, 50.00px 125.00px, 50.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, 125.51px 50.01px, 126.06px 50.03px, 126.64px 50.06px, 127.25px 50.11px, 127.89px 50.18px, 128.55px 50.27px, 129.24px 50.38px, 129.96px 50.52px, 130.69px 50.68px, 131.44px 50.87px, 132.21px 51.09px, 132.99px 51.33px, 133.78px 51.61px, 134.59px 51.93px, 135.40px 52.28px, 136.21px 52.67px, 137.03px 53.09px, 137.85px 53.56px, 138.67px 54.07px, 139.49px 54.62px, 140.30px 55.23px, 141.10px 55.87px, 141.90px 56.57px, 142.68px 57.32px, 143.43px 58.10px, 144.13px 58.90px, 144.77px 59.70px, 145.38px 60.51px, 145.93px 61.33px, 146.44px 62.15px, 146.91px 62.97px, 147.33px 63.79px, 147.72px 64.60px, 148.07px 65.41px, 148.39px 66.22px, 148.67px 67.01px, 148.91px 67.79px, 149.13px 68.56px, 149.32px 69.31px, 149.48px 70.04px, 149.62px 70.76px, 149.73px 71.45px, 149.82px 72.11px, 149.89px 72.75px, 149.94px 73.36px, 149.97px 73.94px, 149.99px 74.49px, 150.00px 75.00px, 150.00px 125.00px, 149.49px 125.01px, 148.94px 125.03px, 148.36px 125.06px, 147.75px 125.11px, 147.11px 125.18px, 146.45px 125.27px, 145.76px 125.38px, 145.04px 125.52px, 144.31px 125.68px, 143.56px 125.87px, 142.79px 126.09px, 142.01px 126.33px, 141.22px 126.61px, 140.41px 126.93px, 139.60px 127.28px, 138.79px 127.67px, 137.97px 128.09px, 137.15px 128.56px, 136.33px 129.07px, 135.51px 129.62px, 134.70px 130.23px, 133.90px 130.87px, 133.10px 131.57px, 132.32px 132.32px, 131.57px 133.10px, 130.87px 133.90px, 130.23px 134.70px, 129.62px 135.51px, 129.07px 136.33px, 128.56px 137.15px, 128.09px 137.97px, 127.67px 138.79px, 127.28px 139.60px, 126.93px 140.41px, 126.61px 141.22px, 126.33px 142.01px, 126.09px 142.79px, 125.87px 143.56px, 125.68px 144.31px, 125.52px 145.04px, 125.38px 145.76px, 125.27px 146.45px, 125.18px 147.11px, 125.11px 147.75px, 125.06px 148.36px, 125.03px 148.94px, 125.01px 149.49px, 125.00px 150.00px, 75.00px 150.00px, 50.00px 150.00px, 50.00px 125.00px, 50.00px 75.00px, 75.00px 50.00px)"></div>
<div class="layer" style="background:orange;clip-path:polygon(76.66px 54.00px, 125.41px 54.00px, 125.53px 54.00px, 126.03px 54.03px, 126.55px 54.08px, 127.10px 54.14px, 127.67px 54.21px, 128.26px 54.31px, 128.87px 54.43px, 129.49px 54.56px, 130.14px 54.73px, 130.79px 54.91px, 131.46px 55.12px, 132.14px 55.36px, 132.83px 55.63px, 133.52px 55.93px, 134.22px 56.26px, 134.92px 56.63px, 135.62px 57.03px, 136.32px 57.47px, 137.02px 57.94px, 137.72px 58.45px, 138.40px 59.01px, 139.08px 59.61px, 139.75px 60.25px, 140.39px 60.92px, 140.99px 61.60px, 141.55px 62.28px, 142.06px 62.98px, 142.53px 63.68px, 142.97px 64.38px, 143.37px 65.08px, 143.74px 65.78px, 144.07px 66.48px, 144.37px 67.17px, 144.64px 67.86px, 144.88px 68.54px, 145.09px 69.21px, 145.27px 69.86px, 145.44px 70.51px, 145.57px 71.13px, 145.69px 71.74px, 145.79px 72.33px, 145.86px 72.90px, 145.92px 73.45px, 145.97px 73.97px, 146.00px 74.47px, 146.00px 74.59px, 146.00px 121.00px, 146.00px 121.00px, 146.00px 121.00px, 146.00px 121.30px, 145.88px 121.31px, 145.08px 121.44px, 144.25px 121.60px, 143.40px 121.79px, 142.53px 122.01px, 141.64px 122.26px, 140.73px 122.55px, 139.81px 122.87px, 138.88px 123.24px, 137.94px 123.64px, 136.99px 124.09px, 136.04px 124.59px, 135.09px 125.13px, 134.14px 125.72px, 133.19px 126.36px, 132.25px 127.06px, 131.32px 127.81px, 130.40px 128.62px, 129.49px 129.49px, 128.62px 130.40px, 127.81px 131.32px, 127.06px 132.25px, 126.36px 133.19px, 125.72px 134.14px, 125.13px 135.09px, 124.59px 136.04px, 124.09px 136.99px, 123.64px 137.94px, 123.24px 138.88px, 122.87px 139.81px, 122.55px 140.73px, 122.26px 141.64px, 122.01px 142.53px, 121.79px 143.40px, 121.60px 144.25px, 121.44px 145.08px, 121.31px 145.88px, 121.30px 146.00px, 121.00px 146.00px, 121.00px 146.00px, 75.00px 146.00px, 75.00px 146.00px, 54.00px 146.00px, 54.00px 125.00px, 54.00px 125.00px, 54.00px 76.66px, 54.14px 76.51px, 56.63px 74.03px, 59.11px 71.54px, 61.60px 69.06px, 64.09px 66.57px, 66.57px 64.09px, 69.06px 61.60px, 71.54px 59.11px, 74.03px 56.63px, 76.51px 54.14px, 76.66px 54.00px)"></div>
<div class="layer" style="background:green;clip-path:polygon(79.14px 60.00px, 125.18px 60.00px, 125.50px 60.03px, 125.91px 60.07px, 126.34px 60.13px, 126.78px 60.20px, 127.23px 60.29px, 127.70px 60.39px, 128.18px 60.51px, 128.67px 60.65px, 129.17px 60.81px, 129.68px 60.99px, 130.19px 61.19px, 130.71px 61.41px, 131.23px 61.66px, 131.76px 61.93px, 132.28px 62.23px, 132.80px 62.56px, 133.32px 62.91px, 133.84px 63.30px, 134.36px 63.71px, 134.86px 64.16px, 135.36px 64.64px, 135.84px 65.14px, 136.29px 65.64px, 136.70px 66.16px, 137.09px 66.68px, 137.44px 67.20px, 137.77px 67.72px, 138.07px 68.24px, 138.34px 68.77px, 138.59px 69.29px, 138.81px 69.81px, 139.01px 70.32px, 139.19px 70.83px, 139.35px 71.33px, 139.49px 71.82px, 139.61px 72.30px, 139.71px 72.77px, 139.80px 73.22px, 139.87px 73.66px, 139.93px 74.09px, 139.97px 74.50px, 140.00px 74.82px, 140.00px 115.00px, 140.00px 115.00px, 140.00px 115.00px, 140.00px 116.49px, 139.91px 116.52px, 138.81px 116.87px, 137.70px 117.26px, 136.58px 117.70px, 135.44px 118.19px, 134.30px 118.73px, 133.16px 119.33px, 132.01px 119.98px, 130.86px 120.70px, 129.72px 121.47px, 128.58px 122.32px, 127.46px 123.22px, 126.35px 124.20px, 125.25px 125.25px, 124.20px 126.35px, 123.22px 127.46px, 122.32px 128.58px, 121.47px 129.72px, 120.70px 130.86px, 119.98px 132.01px, 119.33px 133.16px, 118.73px 134.30px, 118.19px 135.44px, 117.70px 136.58px, 117.26px 137.70px, 116.87px 138.81px, 116.52px 139.91px, 116.49px 140.00px, 115.00px 140.00px, 115.00px 140.00px, 75.00px 140.00px, 75.00px 140.00px, 60.00px 140.00px, 60.00px 125.00px, 60.00px 125.00px, 60.00px 79.14px, 60.00px 79.14px, 60.00px 79.14px, 62.56px 76.58px, 65.36px 73.78px, 68.17px 70.97px, 70.97px 68.17px, 73.78px 65.36px, 76.58px 62.56px, 79.14px 60.00px, 79.14px 60.00px, 79.14px 60.00px)"></div>
</div>
</div>
</body>