用clip-path绘制多边形，在布局上有妙用‘；
以下灵感来源于 http://species-in-pieces.com；超级酷的
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clip测试</title>
<style>
.box {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.shard {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
transition: 0.23s 0s cubic-bezier(0.62, 0.02, 0.34, 1);
}
.one .shard:nth-child(1) {
background-color: aquamarine;
clip-path: polygon(5px 10px, 5px 100px, 55px 45px);
}
.one .shard:nth-child(2) {
background-color: red;
clip-path: polygon(55px 55px, 5px 110px, 55px 155px);
}
.one .shard:nth-child(3) {
background-color: #2abc76;
clip-path: polygon(200px 55px, 250px 55px, 275px 155px, 250px 205px, 200px 155px);
}
.tow .shard:nth-child(1) {
background-color: aquamarine;
clip-path: polygon(55px 55px, 5px 110px, 55px 155px);
}
.tow .shard:nth-child(2) {
background-color: red;
clip-path: polygon(5px 10px, 5px 100px, 55px 45px);
}
.tow .shard:nth-child(3) {
background-color: #2abc76;
clip-path: polygon(200px 155px, 250px 25px, 275px 105px, 250px 205px, 200px 55px);
}
</style>
</head>
<body>
<div class="box one">
<div class="shard"></div>
<div class="shard"></div>
<div class="shard"></div>
</div>
<button class="transform">转变</button>
<script>
const btn = document.querySelector('.transform');
btn.addEventListener('click', function (e) {
const box = document.querySelector('.box')
const boxClass = box.className;
console.log(boxClass);
if (boxClass.indexOf('one') != -1) {
box.className = 'box tow'
} else {
box.className = 'box one'
}
})
</script>
</body>
</html>
还有`还有张鑫旭大神写了一组 0 - 1；用来做了一组时钟,用css绘制的数字哦。
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* by zhangxinxu(.com)，可免费商用，保留此注释即可 */
.num {
display: inline-block;
line-height: 1;
-webkit-text-fill-color: transparent;
font-family: system-ui;
font-weight: bold;
position: relative;
overflow: hidden;
transition: 0.23s 0s cubic-bezier(0.62, 0.02, 0.34, 1);
}
.num:empty::after {
content: '0';
}
.num::before {
content: '';
position: absolute;
inset: 0;
background-color: currentColor;
}
.num0::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 80%, calc(60% - .01px) 80%, calc(60% - .01px) 100%, 0% 100%);
}
.num1 {
text-indent: -.25em;
}
.num2::before,
.num5::before {
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 60%, 50% 80%, 100% 80%, 100% 100%, 0 100%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num3::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0% 80%, 50% 80%, 50% 60%, 0% 60%, 0% 40%, 50% 40%, 50% 20%, 0% 20%);
}
.num4::before {
clip-path: polygon(0 0, 40% 0, 40% 50%, calc(100% - 40%) 50%, calc(100% - 40%) 0%, 100% 0%, 100% 100%, calc(100% - 40%) 100%, calc(100% - 40%) 70%, 0% 70%);
}
.num5::before {
transform: scaleX(-1);
}
.num6::before,
.num9::before {
clip-path: polygon(0% 0%,
100% 0%,
100% 20%,
calc(40% - .01px) 20%,
calc(40% - .01px) 80%,
calc(100% - 40%) 80%,
calc(100% - 40%) 60%,
40% 60%,
40% 40%,
100% 40%,
100% 100%,
0% 100%);
}
.num7::before {
clip-path: polygon(0% 0%,
100% 0%,
100% 100%,
50% 100%,
50% 20%,
0% 20%);
}
.num8::before {
clip-path: polygon(0% 0%, calc(40% - .01px) 0%, calc(40% - .01px) 40%, 60% 40%, 60% 20%, 40% 20%, 40% 0%, 100% 0%, 100% 100%, 40% 100%, 40% 80%, 60% 80%, 60% 60%, calc(40% - .01px) 60%, calc(40% - .01px) 100%, 0% 100%);
}
.num9::before {
transform: scale(-1);
}
@supports not (inset: 0) {
.num::before {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
.box {
font-size: 50px;
text-align: center;
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<span class="num num0"></span>
<span class="num num0"></span>
:
<span class="num num0"></span>
<span class="num num0"></span>
:
<span class="num num0"></span>
<span class="num num0"></span>
</div>
<script>
function switchNumber(key) {
return `num num${key}`;
}
function addZero(num) {
return num > 9 ? num.toString() : '0' + num;
}
(function () {
const numList = document.querySelectorAll('.num');
setInterval(() => {
const time = new Date()
const h = time.getHours();
const m = time.getMinutes();
const s = time.getSeconds();
const timeStr = `${addZero(h)}${addZero(m)}${addZero(s)}`;
timeStr.split('').map((item, index) => {
const newClassName = switchNumber(item);
const oldlassName = numList[index].className;
if (newClassName != oldlassName) {
numList[index].className = newClassName;
}
})
}, 1000)
})()
</script>
</body>
</html>
