大家好!
今天跟大家分享一个用 css 画中国结的教程。
最终效果如下:

大家如果感兴趣可以参考我的源码:gitHub地址


首先,我们定义好画中国结需要的结构:

<div class="knot">
<span class="box"></span>
<span class="box"></span>
<span class="box"></span>
<span class="box"></span>
</div>

然后开始写样式,让中国结居中显示:

body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

设置装中国结的容器样式:

.knot {
box-sizing: border-box;
font-size: 100px;
width: 2em;
height: 1.6em;
background: skyblue;
display: flex;
align-items: center;
justify-content: center;
}

我把中国结的基础样式拆分成4个长方形,首先来定义长方形的基础样式:

.box {
position: absolute;
box-sizing: border-box;
width: 1em;
height: 0.4em;
border: var(--b) solid firebrick;
--b: 0.1em;
}

然后我们来调整每一个长方形的样式,把它们组合成结的基础样子:

.knot .box:nth-child(1) {
transform: rotate(45deg) translate(-15%, -38%);
border-radius: 20% 0% 0% 20% / 50% 0 0 50%;
} .knot .box:nth-child(2) {
transform: rotate(45deg) translate(15%, 37%);
border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;
} .knot .box:nth-child(3) {
transform: rotate(-45deg) translate(15%, -38%);
border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;
} .knot .box:nth-child(4) {
transform: rotate(-45deg) translate(-15%, 37%);
border-radius: 20% 0% 0% 20% / 50% 0 0 50%;
}

最后,我们利用第一个和第二个长方形的伪元素来画出余下的那两个小圆圈:

.knot .box:nth-child(1)::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 0.4em;
height: 0.4em;
border: var(--b) solid firebrick;
border-radius: 50% 50% 50% 0%;
top: -0.4em;
right: -0.4em;
} .knot .box:nth-child(2)::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 0.4em;
height: 0.4em;
border: var(--b) solid firebrick;
border-radius: 50% 0% 50% 50%;
top: 0.2em;
right: 0.8em;
}

大功告成!

css实战#用css画一个中国结的更多相关文章

  1. 如果用css的border属性画一个三角形

    假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...

  2. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  3. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  4. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  6. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

  7. css画一个提示框

    用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  9. CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

随机推荐

  1. P2486 [SDOI2011]染色 区间合并+树链剖分(加深对线段树的理解)

    #include<bits/stdc++.h> using namespace std; ; struct node{ int l,r,cnt,lazy; node(,,,):l(l1), ...

  2. LeetCode No.115,116,117

    No.115 NumDistinct 不同的子序列 题目 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且 ...

  3. Linux/UNIX 上安装 MySQL

    Linux/UNIX 上安装 MySQL Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址: MySQL - MySQL服务器.你需要该选项,除非你只想连 ...

  4. Qt LNK1112: 模块计算机类型“x64”与目标计算机类型“X86”冲突问题

    解决方法:1.找到选项: 2.点击构建套件kit,选择x86_amd64,之后便不会出现类似问题了

  5. LGOJ2257 YY的GCD

    这题美好体验就是卡常 Description link 求 \[\sum^{n}_ {i=1} \sum^m_{j=1} [gcd(i,j)\in prime]\] 其中:\(1\leq n,m \l ...

  6. C#常用到的命令及常用控件的属性

    Application.Exit()应用程序退退出 this.Close()当前窗口退出 int h = DateTime.Now.Hour;      //获取当前时间的小时部分 int m = D ...

  7. html和jsp页面中把文本框禁用,只能读不能写的方法

    方法常用有三种: 第一种,使用   onfocus="this.blur()" <input name="deptno" type="text& ...

  8. Hello 2015

    "Yeah It's on. " 前言 Hux 的 Blog 就这么开通了. 跳过废话,直接看技术实现 2015 年,Hux 总算有个地方可以好好写点东西了. 作为一个程序员, B ...

  9. 吴裕雄--天生自然HTML学习笔记:关闭8080端口被占用怎么办?关闭8080端口被占用

  10. maven工程根项目运行ok但是子项目就报错的解决办法

    正常启动没错 项目出现问题 maven工程根项目运行ok但是子项目就报错 报错信息是xxxx没有创建 解决办法 原来是子项目的依赖少了  没有配置1.8  所以会出现莫明其妙的bug