css实战#用css画一个中国结
大家好!
今天跟大家分享一个用 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画一个中国结的更多相关文章
- 如果用css的border属性画一个三角形
假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
随机推荐
- iTOP4412开发板-使用buildroot搭建最简单的linux
本文档介绍的是使用buildroot搭建最简单的linux文件系统,Buildroot是Linux平台上一个构建嵌入式Linux系统的框架.整个Buildroot是由Makefile脚本和Kconfi ...
- 48)PHP,工厂模式
为啥需要工厂模式啊: (原来是生产类的工具——————————) 工厂类的代码格式: <?php class factory{ //Instance表示“实例”,“对象” static func ...
- JacksonUtil
package org.linlinjava.litemall.core.util; import com.fasterxml.jackson.core.type.TypeReference; imp ...
- 2018-1 WebStorm最新版本破解激活方法
在激活页面选择License Server,输入:http://idea.codebeta.cn,点击Activate即可激活. 如果失效用这个: http://idea.ibdyr.com
- signal——信号集
1.信号集 每个进程都有一个信号屏蔽字,它规定了当前要阻塞递送到该进程的信号集.对于每种可能的信号,该屏蔽字中都有一bit位与之对应.信号数可能会超过一个整型数所包含的二进制位数,因此POSIX.1 ...
- COMET探索系列三【异步通知服务器关闭数据连接实现思路】
在小编络络 COMET实践笔记一文中注意事项中有这么一段话 使用长连接时, 存在一个很常见的场景:客户端需要关闭页 面,而服务器端还处在读取数据的阻塞状态,客户端需要及时通知服务器端关闭数据连接.服务 ...
- XRichText
XRichText是一个可以显示Html富文本的TextView.可以用于显示新闻.商品详情等场景.欢迎star.fork,提出意见. 使用 Gradle : compile 'cn.droidlov ...
- 吴裕雄--天生自然python学习笔记:python用OpenCV 读取和显示图形
Open CV 是一个开源.跨平台的计算机视觉库,它可 以在商业和研究领域中免费使用,目前已广泛应用于人机 互动.人脸识别.动作识别.运动跟踪等领域. 要识别特定的图像,最重要的是要有识别对象的特征 ...
- 前端-js-长期维护
############### JS简介和JS引入 ################ <!DOCTYPE html> <html lang="en" ...
- django框架基础-ORM跨表操作-长期维护
############### 一对一跨表查询 ################ import os if __name__ == '__main__': os.environ.setde ...