CSS练习：使用CSS绘制各种图案
前言
在公司里上班主要还是写后端，但是有时候想实现自己的想法时，前端的能力常常成为我得瓶颈，特别是样式这块，所以买了套课程来练习CSS技巧
使用clip-path + polygon 来绘制各种图案
之前绘制突然，过于依赖切图或者svg，今天学到了一个新的技巧—clip-path的用法，clip-path可以用来绘制各种各样有意思的图案，而且纯css的实现可以减少对ui的依赖
如下图，这是我练习绘制的一些图案
index.html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用CSS绘制各种图案</title> <style> .container { /*display: flex;*/ /*justify-content: start;*/ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .polygon { width: 200px; height: 200px; background-color: #1c94ad; } .polygon-1 { --s: 20%; clip-path: polygon( var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100% ); } .polygon-2 { --s: 20%; clip-path: polygon( 0 0, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, var(--s) 50% ); } .polygon-3 { --p: 100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%, 100% 0; clip-path: polygon(var(--p)); } .polygon-3-invert { --p: 100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%, 100% 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--p)); } .polygon-4 { --shape: 10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%, 10% 25%; clip-path: polygon(var(--shape)); } .polygon-4-invert { --shape: 10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%, 10% 25%; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--shape)); } .polygon-5 { /* 内部点 */ --shape-inner: 100% 50%, 78.98% 57.76%, 93.3% 75%, 71.21% 71.21%, 75% 93.3%, 57.76% 78.98%, 50% 100%, 42.24% 78.98%, 25% 93.3%, 28.79% 71.21%, 6.7% 75%, 21.02% 57.76%, 0% 50%, 21.02% 42.24%, 6.7% 25%, 28.79% 28.79%, 25% 6.7%, 42.24% 21.02%, 50% 0%, 57.76% 21.02%, 75% 6.7%, 71.21% 28.79%, 93.3% 25%, 78.98% 42.24%, 100% 50%; clip-path: polygon(var(--shape-inner)); } .polygon-5-invert { --s: -20px; /* 控制空间 */ /* 内部点 */ --shape-inner: 100% 50%, 78.98% 57.76%, 93.3% 75%, 71.21% 71.21%, 75% 93.3%, 57.76% 78.98%, 50% 100%, 42.24% 78.98%, 25% 93.3%, 28.79% 71.21%, 6.7% 75%, 21.02% 57.76%, 0% 50%, 21.02% 42.24%, 6.7% 25%, 28.79% 28.79%, 25% 6.7%, 42.24% 21.02%, 50% 0%, 57.76% 21.02%, 75% 6.7%, 71.21% 28.79%, 93.3% 25%, 78.98% 42.24%, 100% 50%; /* 外部点 */ --shape-outer: var(--s) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) var(--s); /*padding: calc(-1 * var(--s)); !* 添加填充 *!*/ box-sizing: content-box; /* 重置 box-sizing */ /* 反转形状 */ clip-path: polygon(evenodd, var(--shape-outer), var(--shape-inner)) content-box; /* 在开头添加 evenodd，结尾添加 content-box */ } .polygon-6 { clip-path: polygon( 0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0% ); } .polygon-7 { clip-path: polygon( 50% 0, calc(50% * (1 + sin(.4turn))) calc(50% * (1 - cos(.4turn))), calc(50% * (1 - sin(.2turn))) calc(50% * (1 - cos(.2turn))), calc(50% * (1 + sin(.2turn))) calc(50% * (1 - cos(.2turn))), calc(50% * (1 - sin(.4turn))) calc(50% * (1 - cos(.4turn))) ); } </style></head><body><div class="container"> <div class="polygon polygon-1"></div> <div class="polygon polygon-2"></div> <div class="polygon polygon-3"></div> <div class="polygon polygon-3-invert"></div> <div class="polygon polygon-4"></div> <div class="polygon polygon-4-invert"></div> <div class="polygon polygon-5"></div> <div class="polygon polygon-5-invert"></div> <div class="polygon polygon-6"></div> <div class="polygon polygon-7"></div></div></body></html>