CSS 之 太极图

最新推荐文章于 2024-05-11 20:33:26 发布
最新推荐文章于 2024-05-11 20:33:26 发布
阅读量176 收藏 1
点赞数 1
原文链接：https://juejin.im/post/5bebdf49e51d45276d661c04
版权

整体思路: 太极有三个元素, 大圆,两个小圆.

  1. 有三个内容为空的border矩形
    1. 一大: 默认内容为空, 就只剩下白色背景, 然后右边加一个一样大的黑色border
    2. 二小: 一上一下放在大圆的上下两个鱼眼处
      1. 默认内容为空, 白色背景是中间的小圆, 背景是黑色
      2. 默认内容为空, 黑色背景是中间的小圆, 背景是白色
  2. 太极是圆的啊, 所以把矩形变成圆形的神奇属性:border-radius.
  3. 设置三个圆的相对位置, 半径大小加起来要要严丝合缝.

代码内容:

  1. HTML: 一个div
  2. CSS: 包含三个内容,对应三个圆
    1. 每行代码都有注释..
    2. 看不懂快戳评论告诉我!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color:grey;
    }
    .yinyang {
      width: 120px; height: 240px;
      background-color: white;
      border-color: black;
      border-style: solid;
      border-width: 1px 121px 1px 1px;
      border-radius: 50%;
      position: relative;
    }
    
    .yinyang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: white;
      border: 40px solid black;
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
    
    .yinyang:after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      background-color: black;
      border: 40px solid white;
      border-radius:50%;
      width: 40px;
      height: 40px;
    }
  </style>
</head>
<body>
  <div class="yinyang"></div>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5bebdf49e51d45276d661c04

weixin_34268753
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用css画太极,CSS画太极阴阳图
weixin_39837139的博客
08-04 692
引言CSS可以画很多图形，今天我们来画一个特殊的图形——中国古代哲学的“太极图”。如果没有用CSS画过简单图形，建议先学习如何用border属性画三角形。构思步骤1.在 html 中写一个 div 标签，class 命名为 taiChi 。复制代码2.假设我们想画一个宽高为100px太极图，border 的粗细为2px，由于 border 的粗细占位4px，此时宽高已经变成了96px。关于 bor...
css画太极图(阴阳八卦)
09-25
总结起来，这个CSS太极图的实现主要涉及以下几个知识点： 1. CSS选择器：`id`选择器用于选中特定元素，伪元素`:before`和`:after`用于添加额外内容。 2. 盒模型：`border`属性设置边框，`border-radius`创建圆角，`...
CSS 旋转太极图
菜鸟吴de博客
10-12 190
CSS 旋转太极图
CSS创作太极图
2402_82469624的博客
05-11 146
【代码】CSS创作太极图。
通过CSS实现太极图案例
xu_yuxuyu的博客
11-05 4479
概述： 所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。 话不多说，先让我们看看太极图的形状~ 乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。 思路 先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
css3做太极图
最爱喝怡宝的博客
11-24 479
使用 css3 制作炫酷的会转的太极图： 先做出基本外观： <body> <div class="box"></div> </body> 最外层样式： <style> .box{ width: 400px; height: 400px; border: 1px solid #000; /* 最外层大盒子倒
今日CSS之旋转太极图
huhuhu667的博客
07-07 78
首先，我们在body里面建立一个父类div，其次再建6个我们需要用到的子类div，这些准备工作做好之后我们开始进行CSS的书写。CSS的书写我们在style里面进行，对于单个的元素我们用子绝父相的定位方式（子类绝对定位，父类相对定位），并且要定义好子类和父类的width和height。top: 250px;.z5{
纯css实现太极八卦图
前端码农
03-07 1447
纯css实现太极八卦图
简单HTML+css太极图
Xiaohuang的博客
11-27 260
简单HTML+css太极图
CSS 太极图
PinkCoder
12-04 937
CSS 太极图 ，纯属兴趣画图
CSS3绘制旋转太极图特效代码
03-20
制作过程： 第一步创建一个1:1的DIV(width和height)自定义： 第二步创建两个矩形，高度为宽度的一半拼合则为一个正方形 第三步设置上矩形和下矩形的角度使其成为半圆，切设置边框 第四步每个矩形里创建圆（且创建内...
太极图用css进行绘画，主要利用css 免费
12-02
太极图用css进行绘画，主要利用css 免费
HTML和CSS制作太极
05-28
用HTML和CSS做了一个太极图，非常炫酷，主要用到了动画属性transform和animation，以及高级选择器伪元素等
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
css实现太极图
05-30
可以使用 CSS 的伪元素和 transform 属性来实现太极图。以下是示例代码： HTML: ```html <div class="taiji"></div> ``` CSS: ```css .taiji { width: 200px; height: 200px; border-radius: 50%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值