使用CSS 绘制各种形状
如何使用CSS 绘制各种形状？
很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。
其实使用CSS可以绘制出很形状的，比如三角形，梯形，圆形，椭圆形等等，并不只能画矩形。
今天的教程，就来教大家怎么去用CSS绘制这些图形吧。
为了方便大家去理解，今天分成基本形状和组合形状来一起讲解吧，基本形状是非常好理解的，再利用这些基本形状进行组合，就可以实现稍微复杂的组合形状了。
基本形状
三角形
梯形
圆形
椭圆
球体
半圆
菱形
组合形状
心形
心形是由两个圆形和一个矩形进行组合得到的。
扇形
扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。
五边形
五边形是由一个三角形和一个梯形进行组合得到的。
六边形
六边形是由两个三角形和一个矩形进行组合得到的。
长方体
长方体是由六个矩形进行组合得到的。
圆柱体
圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。
棱锥
棱锥是由四个三角形和一个矩形进行组合得到的。
最后
今天讲的内容里，有些可能大家会觉得有些比较难实现，其实你也可以使用 clip-path 这一个属性，绘制各种形状。
当然，CSS能绘制的东西，远不止这些。还有许多东西今天一下子讲不完，今天讲的都是比较基础的一些，对这个感兴趣的小伙伴可以后面自己去探索一下。
使用CSS 绘制各种形状的更多相关文章
- 如何用 CSS 绘制各种形状
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- 我是如何用 CSS 绘制各种形状的
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- css绘制各种形状
代码:http://runjs.cn/code/9lyjtbxl: 效果:http://sandbox.runjs.cn/show/9lyjtbxl <!DOCTYPE html> < ...
- Css绘制形状
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
- css绘制常见的几何图形
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 用CSS绘制最常见的40种形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
随机推荐
- Java学习笔记（二）java流程控制
学习笔记2 Java流程控制 这次也是跟着[狂神说Java]Java零基础学习视频通俗易懂继续学习的,持续学习,你我共勉. 一. 用户交互Scanner 1. Scanner对象 之前学的基本语法没有 ...
- vue 项目配置自动打压缩包
vue cli3 创建的项目 1.安装包 npm install filemanager-webpack-plugin --save-dev npm install silly-datetime -- ...
- 你到底懂不懂JavaScript？来做做这12道面试题试试！
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 21 天,点击查看活动详情 JavaScript 是每一个前端开发者都应该掌握的基础技术,但是很多时候,你可能并不完全懂 Jav ...
- 解决多行文本超出显示省略号webpack打包后失效的问题
开发环境没问题: 但是在打包部署后就失效了: 经过对比后发现是因为: 缺少了 -webkit-box-orient: vertical; 导致 解决方案 : /* ! autoprefixer: o ...
- 使用a标签锚点实现顺滑效果
scroll-behavior:smooth;//使用该方法使用a标签锚点的时候会实现平滑 xxx.scrollIntoView({ behavior: "smooth" })
- Redis Stack（生产适配-仅提供 Redis Stack 服务器） (6.2.4-v2版本)
一.使用docker安装(生产适配-仅提供 Redis Stack 服务端) (6.2.4-v2版本) 简介 安装命令根据实际部署情况调整 版本地址:官方镜像主页 | 发布版Tags 指定版本命令-推 ...
- django源码剖析（steup、runserver、生命周期）
工作上会经常用到不熟悉的第三方模块,大多数时候会选择看文档.百度谷歌.看源码等形式去把它用起来.几年工作经验下来源码看的不少了,但当面试被问到django的生命周期时,只能浅谈根据wsgi协议会走ap ...
- git仓库搭建及免密使用
- DOS命令操作
打开CMD的方式 1.开始+系统+命令提示符 2.Win键+R 输入CMD打开控制台(推荐使用) 3.在任意的文件夹下面,按住shift+鼠标右键点击,在此处打开命令行窗口 4.资源管理器的地址栏前面 ...
- 【python/pyside2】向QVBoxLayout添加滚动条
import sys from PySide2.QtWidgets import * from PySide2.QtGui import QFont from PySide2 import QtCor ...