【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;}
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框相关推荐
- 纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
- CSS实现鼠标移入图片边框有小三角
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
转载自:https://blog.csdn.net/lzgs_4/article/details/46827761 在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时 ...
- css怎么移动半圆,css3半圆
Document div { margin-bottom: 30px; margin-left: 30px; } /* 上半圆 */ .semi-circle { width: 100px; heig ...
- 【CSS】实现圆、二分之一、四分之一圆
最近项目重构,其中有个模块涉及到的交互全改了,跟css挂钩的点很多,这里简单做个记录. 要实现圆首先得知道border-radius这个属性,引用MDN上的解释: CSS 属性 border-radi ...
- css border制作小三角形状及应用(兼容IE6)
原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
- div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- [css] 为什么说不提倡用1px的小尺寸图片做背景平铺?
[css] 为什么说不提倡用1px的小尺寸图片做背景平铺? 因为明明可以用background-color就能搞定的事情为什么要用图片? 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
最新文章
- Linux TOP 命令显示详情
- 安装python3.6-pyppeteer
- SonarQube4.4+Jenkins进行代码检查实例之一
- linux 句柄_linux 文件句柄数查看命令
- Spring事务管理TransactionManager
- 通过C#/.NET API使用CNTK
- Hadoop入门(三)HDFS API
- 关于deepin系统安装design compiler的问题解答
- php做异地登录验证,PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
- python基本规则语法
- 计算机体系结构量化研究方法——学习(一)
- 驰骋计算产业数十年的Wintel联盟开始分崩离析
- 阿里云云平台的物理安全防御措施
- 用word快速将数字字体换成新罗马详细简单方法
- 手把手带你调参Yolo v5 (v6.2)(训练)
- 获取网页iconfont的方法,查看eot文件内容
- webview的一些使用小窍门和需注意的地方
- 前端处理 token 时效性问题
- Python math.perm() 方法
- 关于填报《国家自然科学基金资助项目结题报告》的说明
热门文章
- wpf,silverlight,wp7,winform等学习资料整合(一)
- [原创]windows server 2012 AD架构 试验 系列 – 17管理用户AD帐号
- 关于使用实验室服务器的GPU以及跑上TensorFlow代码
- python的spider程序下载安装_Python3WebSpider
- 流程图基础绘制方法和流程图制作软件功能详解
- 回归中的相关度和R平方值——学习笔记
- NDK51_OpenGL:FBO
- PS网页设计教程XXI——在Photoshop中创建一个光质感网页设计
- Android Light
- java基于springboot+vue网上图书商城 销售+借阅两种模式 nodejs前后端分离