【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:路漫漫其修远兮。吾将上下而求索。
最新文章
- JS自执行匿名函数
- MVC3.0 上传图片并生成缩略图
- [CareerCup] 5.2 Binary Representation of Real Number 实数的二进制表示
- 控制台应用程序中Main函数的args参数
- Crawling is going on - Alpha版本使用说明
- emWin(ucGui)数值显示例程 -【worldsing笔记】
- yarn资源管理器高可用性的实现
- JSP基础笔记
- HTML 表单元素之 input 元素
- twemproxy代理主干流程——剖析twemproxy代码正编
- ADO.NET的学习
- NOTIC: Invalid argument supplied for foreach()
- 005-2-Python文件操作
- centos7磁盘在线扩容
- IP-v4&;IP-v6
- shell脚本编写informix数据库中表的导入和导出
- AWS DevOps – 配合Jenkins和CodeDeploy实现代码自动化部署
- [MapReduce_add_1] Windows 下开发 MapReduce 程序部署到集群
- Swift学习笔记(十四)——字符,常量字符串与变量字符串
- BZOJ4184:shallot(线段树分治,线性基)