???? 作者主页：Java李杨勇
???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
???? 欢迎点赞 ???? 收藏 ⭐留言 ????
效果演示： 文末获取源码
代码目录：
主要代码实现：
CSS样式：
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background: #efefef;
}
.letters {
width: 20vw;
height: 20vw;
float: left;
mix-blend-mode: multiply;
}
.letter-l {
background-color: #1e00ff;
clip-path: polygon(0 0, 50% 0, 50% 65%, 100% 65%, 100% 100%, 0 100%);
}
.letter-o {
background-color: #ff0061;
clip-path: circle(50%);
margin-left: -8vw;
}
.letter-v {
background-color: #e1ff00;
clip-path: polygon(0 0, 100% 0, 50% 100%);
margin-left: -6vw;
}
.letter-e {
background-color: #00ff9e;
clip-path: polygon( 0 0, 100% 0, 100% 35%, 50% 35%, 50% 40%, 100% 40%, 100% 60%, 50% 60%, 50% 65%, 100% 65%, 100% 100%, 0 100%);
margin-left: -4vw;
}HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tetradic Love</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="letters letter-l"></div>
<div class="letters letter-o"></div>
<div class="letters letter-v"></div>
<div class="letters letter-e"></div>
</div>
</body>
</html>源码获取
打卡 文章 更新 47 / 100天
