CSS 绘制几何图形总结
三角形
border实现
首先将元素内容宽高设置为0，设置每个border宽和样式后是四个三角形。
然后删除指定方向对侧的border：
最后将非指定方向上的border设置为透明：
等边三角形：通过设置border宽度比为：指定方向 / 非指定方向 = 即可。
角落三角形：只设置相邻两个border的宽度，且其中一个设置为transparent。
线性渐变实现：
实现一个45°方向的线性渐变容器，在50%的位置向后设置为透明：
圆锥渐变实现：
首先圆心点设置于 50% 0即 center top（容器最上方的中间），设置转动初始方向是90deg。转动45deg即可，后面都是透明（多出来的 0.1deg 是为了简单消除渐变产生的锯齿的影响）：
rotate旋转实现：
首先父容器设置相对定位，子元素绝对定位，设置子元素的旋转中心在左下角 left bottom，然后进行旋转到相应角度即可
clip-path剪切实现：
clip-path创建剪切区域。区域内的显示，区域外的隐藏。
十进制 Unicode字符实现：
通过transform旋转 （rotate ）或者缩放（scale） ，来改变三角形的方向和大小。
阴影三角形：
梯形
border实现：在三角形border实现中，通过只修改元素的一个方向的尺寸（宽或高）可以将该方向上的border变成梯形：
通过设置元素的宽度，可以同时修改梯形的上下底长度；通过设置 border-left-width 和 border-right-width 可以修改底角大小，border 越宽，底角越小。另外还可以设置 border-bottom-width，从而控制梯形的高度。如果要改变梯形的方向，则应该改变元素height的值，元素width保持为0。
正方形
vw实现：
将盒子的宽高设置为相同的数值和计量单位 vw 或 vh（一般使用 vw）。
padding实现：
由于margin和padding的百分比数值是相对于包含块的。将元素垂直方向的一个 padding 值设定为与 width 相同的百分比即可。但是会导致再元素上设置 max-height 属性失效。
伪元素实现：
由于margin collapse 的原因，容器与伪元素在垂直方向发生了外边距折叠，需要在父元素触发BFC，padding则不需要：
同心圆
单个元素 box-shadow实现：
单个元素repeat-radial-gradient重复径向渐变实现：
五角星
五角星可以看作是由三个三角形拼接而成的。
正六边形
方法一：把正六边形分成三部分，左中右分别是：before伪元素部分，div部分，after伪元素部分：
方法二：正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形
CSS 绘制几何图形总结相关推荐
- 使用CSS绘制几何图形（圆形、三角形、扇形、菱形等
在实际开发中,会出现一些小三角,用icon又不方便,于是我使用css绘制,并进行记录 1.在使用伪类时,要加position: absolute;,当我没有加的时候,圆形会变成椭圆形 2.伪类中使用p ...
- CSS绘制常见的几何图形
题外话 在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形; 实现的方式无非四种: 图片 CSS2.1&3 SVG Canvas 就我个人而言,对于一些常见的几何图形. 图片是不推荐的[ ...
- css绘制不规则图形
CSS绘制不规则图形 在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法 对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
- 【OpenCV 4开发详解】图像上绘制几何图形
本文首发于"小白学视觉"微信公众号,欢迎关注公众号 本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- 【Android开发】图形图像处理技术-绘制几何图形
常见的几何图形包括点.线.弧.矩形等.在Android中,Canvas类提供了丰富的绘制几何图形的方法,通过这些方法,可以绘制出各种几何图形.常用的几何图形的绘制方法如下所示: 1. 画一个圆使用的是 ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- 三角形css_使用css绘制三角形
好看的前端网页大家见到的应该都不少 但是很多都是用图片作为背景 今天我们就给大家讲讲怎么用css绘制图形 (图形如下) ---------------------------------------- ...
最新文章
- ［斯坦福创业课］Jeff谈LinkedIn的同理心管理
- Python 关于super 的 用法和原理（挖坑）
- CRMM_PR_MAST cannot activate
- laravel 导出插件
- 汇编语言编译器masm_计算机汇编语言和指令操作
- Android 开发 Camera2开发_3_处理预览和拍照偏暗问题
- delphi android 串口通信,Delphi 7：操作串口（ComPort）
- 《穿越计算机的迷雾》读书笔记六
- 国美做手机、天猫玩魔盒……电商做产品到底会怎么辣眼睛
- 中国象棋---棋盘/棋子
- FJUT 1735 开宝箱
- 网易患病员工被保安赶出公司，项目经理该如何应对中年危机？
- BDW01手把手系列01：BDW01开发板基于TencentOS Tiny之helloworld！
- Wr720n改装OpenWrt打印服务器实现网络无线打印
- html调用短信接口,.net短信接口调用示例（106短信通道）
- 表单和servlet在idea中实现文件的上传
- UltraEdit正则表达式使用（Regular Expressions in UltraEdit）
- 刷个openwrt,并加入改写的802.1X认证客户端（iNode认证）
- 艾默生流量计校验功能
- 500多位商界领袖聚首《移动互联网与金融领袖峰会》5月23-25日.广州站 财智赢未来！