css 绘制圆形 扇形
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框,css矩形
在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也可以用CSS写出各种简单的形状,一来可以减轻他们的负担,二来也可以使用CSS替代图片,提高加载速度。
在网页中,结合CSS能画出来的最基本的形状就是矩形,所以,我们可以在矩形的基础上做出各种变换,得到很多不同的形状。
这次的分享主要用到圆角、边框、定位等知识点(鉴于IE9以上才支持圆角,暂时不考虑兼容问题)
先做一些通用的基础设置:
div {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: red; }
毫无疑问,结合HTML就可以画出最基本的 矩形 :
<div>矩形</div>
效果:
下面针对矩形做一些变换:
圆形:
<div class="circle">圆形</div>
border-radius圆角的四个值按顺序取值分别为:左上、右上、右下、左下。
原理:四个角都是圆角:四个角的取值为50%或为宽和高一样的值(此处即100px)。
.circle {border-radius: 50%; }
半圆:
<div class="semi-circle">半圆</div>
原理:左上、右上角是圆角,右下、左下角是直角: 左上角、右上角的值为宽和高一样的值,右下角、左下角的值不变(等于0);另外,因为还要设置高度值为原来高度的一半才是标准的半圆。
.semi-circle {border-radius: 100px 100px 0 0;height: 50px; }
扇形:
<div class="sector">扇形</div>
原理:左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。
.sector {border-radius: 100px 0 0; }
弧形:
<div class="arc">弧形</div>
原理:两个对角变,另外两个对角不变:比如,左上角、右下角取值为宽和高一样的值,右上角、左下角的值不变(等于0) .添加transform属性可旋转成平躺的弧形,类似人的嘴巴形状,(*^__^*) 嘻嘻……
.arc{border-radius: 100px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
小三角:
<div class="triangle"></div> <div class="arrow"></div>
原理:设置边框,并把原来div的宽和高的值设置为0,即把原来的矩形压缩成只有边框,但因为设置的边框值比较大(为了保证三角形看起来不会太小或者太细),然后设置每一个边框的颜色不同,就可以看出三角形其实就可以是由边框变换而来的。若只想显示某一块三角形,可以把其他的边框颜色设置为透明,即transparent。
.triangle{border: 50px solid green;width: 0;height: 0;border-top-color: yellow;border-right-color: blue;border-bottom-color: pink;border-left-color: orange;}.arrow{background: none; /*为了清除前面div设置的背景颜色*/border: 50px solid red;width: 0;height: 0;border-color: red transparent transparent transparent;}
疑问框:
<div class="rectangle">疑问框</div>
原理:由圆角矩形和一个小三角组成:可结合伪元素、定位实现。
/*圆角矩形*/.rectangle{width: 200px;border-radius: 15px;position: relative;}/*小三角*/.rectangle::before{content: "";width: 0;height: 0;border: 15px solid red;border-color: red transparent transparent transparent;position:absolute;bottom: -30px;left: 40px;}
css 绘制圆形 扇形相关推荐
- CSS简笔画:纯CSS绘制一辆婴儿车
专栏也更新了一小半了,不知道大家都学到了吗?CSS学习其实不难,难的是动手实践,当你看到一个效果是,觉得这个实现起来很难.很难,但是你一旦动手,一步一步分解实现,会发现也没有想象中的那么难. 下面我们 ...
- 使用CSS绘制几何图形(圆形、三角形、扇形、菱形等
在实际开发中,会出现一些小三角,用icon又不方便,于是我使用css绘制,并进行记录 1.在使用伪类时,要加position: absolute;,当我没有加的时候,圆形会变成椭圆形 2.伪类中使用p ...
- css让图片显示圆角 纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角 样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左 纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
- css绘制八方向云台 环形按钮盘
翻了很多帖子,最终基于https://blog.csdn.net/zhangtff/article/details/89458797的文章,使用css绘制出八方向用来控制摄像机等的按钮盘,于此记录. ...
- css绘制不规则图形
CSS绘制不规则图形 在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法 对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
- PHP如何设置圆,php绘制圆形的方法
这篇文章主要介绍了php绘制圆形的方法,详细分析了php绘制图形的基本步骤与绘制圆形的实现方法,需要的朋友可以参考下 本文实例讲述了php绘制圆形的方法.分享给大家供大家参考.具体实现方法如下: ph ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- android圆形头像 demo,Android图像处理之绘制圆形头像
在Android中,绘制圆形和绘制图片都是很容易的事情,但是绘制圆形图片就有点难倒人了.以前为了偷懒就直接去github上找一个开源项目,后来才发现绘制圆形图片其实也是很简单的事.绘制圆形图片也需要两 ...
- Qt,C++开发炫酷圆形扇形菜单面板
一如既往,先上图 动画效果参考下面的是视频 20220316-182247 摘要描述: 1.支持嵌入面板和弹出按钮两种,目前仅完成嵌入面板,后期会实现弹出实现 2.支持非常多的自定义功能,有关自定义功 ...
最新文章
- 微信电脑网页二维码扫描登录简单实现
- Linux进程描述符task_struct结构体详解--Linux进程的管理与调度(一)
- selenium自动化测试多条数据选择第一条
- UA MATH564 概率论 多元随机变量的变换 理论与应用2
- 反汇编基础、OllyDbg简介和界面、基本操作、初级TraceMe练习
- 科大星云诗社动态20210223
- union 与 union all 及其他并集操作说明
- jax-ws cxf_走向REST:将Tomcat嵌入Spring和JAX-RS(Apache CXF)
- windows下使用cmake+mingw配置makefile(2)
- Yum本地Rpm库设置
- JDK历史版本主要新特性
- Teststand 界面打不开问题解决
- 个人身份信息(PII)是什么?会被恶意使用吗?如何保护它?
- python的注释符号有哪些_python注释符号
- oracle rman optimization,Oracle rman备份的使用(转)
- H盘显示数据错误循环冗余检查要怎样办啊
- bzoj 1127 [POI2008]KUP——思路(悬线法)
- uwb定位与蓝牙定位成本对比分析
- LeetCode 416分割等和子集
- 拒绝服务攻击过程详解
热门文章
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
- 微信开发 没有认证过的服务号怎么办?微信提供了测试号(开通了认证过的服务号的功能)
- 使用双重循环实现五子棋游戏棋盘的绘制
- 免费申请office365 A1 和 a1plus 带OneDrive 5T 网盘 office365学生版(转载)
- 计算机电子表格制作教案,电子表格Excel教案设计
- Ubuntu常用磁盘工具Disks、GParted和系统清理应用Cleaner
- 家里两个孩子,你们会一个跟爸姓,一个跟妈姓吗?
- 直流有刷电机驱动项目需求分析
- 2017 Github优秀开源项目整理
- 李宏毅机器学习 Regression