关闭

【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

标签: 小三角半圆扇形弧形
9442人阅读 评论(2) 收藏 举报
分类:

在网页中,经常会用到各种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:路漫漫其修远兮,吾将上下而求索。






1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:197518次
    • 积分:2993
    • 等级:
    • 排名:第12241名
    • 原创:106篇
    • 转载:0篇
    • 译文:0篇
    • 评论:30条
    最新评论