关闭

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

标签: 小三角半圆扇形弧形
13196人阅读 评论(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
查看评论

css实现圆,半圆,四分之一圆和其他几何图形画法

在ife任务4中,画四分之一圆的时候,是画出一个圆并且结合overflow等实现,但是其实可以直接画出半圆或者四分之一圆,之前忽略了几个属性。 圆的画法:先画相应矩形,在用border-radius1.画出圆{ width:100px; height:100px; border-rad...
  • github_34514750
  • github_34514750
  • 2016-04-05 15:44
  • 7453

css画半圆进度条

效果预期:半圆进度条白底,蓝色进度,随着分数的增长蓝色进度条增长。 CSS: .top{ width: 400px; height: 400px; top:-1px; background: #F1F5...
  • wzj2584454
  • wzj2584454
  • 2017-07-17 20:19
  • 635

css 绘制圆形 扇形

【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框,css矩形 在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也可以用CSS写出各种简单的形状,一来可以减轻他们的负担,二来也可以使用CSS替代图片,提高加载速度。 在网页中,结合C...
  • fankof29
  • fankof29
  • 2016-06-19 15:35
  • 3428

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

用纯CSS画出各种图形,包括基本的圆形、椭圆、等边三角形、直角三角形、平行四边形、梯形,多边形如五边形、六边形、八边形等,以及五角星、六角星、八角星、12角星,也包括稍微复杂一点的爱心、无穷大符号、鸡蛋、食豆人、提示对话框、钻石、阴阳八卦等
  • DearMorning
  • DearMorning
  • 2017-02-18 23:30
  • 5668

CSS实现实心三角形和空心三角形

一次开发中遇到,记录代码 原理: 1.给一个div,宽和高都为0的时候,盒子什么都没有看起来。为空白 2.给一个宽高为0的盒子给一遍像素给100px的上边,下边和右边, border-top: 90px solid red; border-right: 100px solid black; bor...
  • qq_34645412
  • qq_34645412
  • 2017-09-22 14:05
  • 2254

CSS3之创建透明边框三角

简述在前面,我们分享过关于三角的实现方式,主要根据border属性来设置,下面我们来实现上、下、左、右各种不同颜色的三角。简述 实现 效果 源码实现效果源码<!DOCTYPE html> <html> <head> <style type='text...
  • u011012932
  • u011012932
  • 2016-03-24 13:37
  • 2716

div边框弧形设计,radius的用法,CSS3 border-radius 属性

CSS3 border-radius 属性 向 div 元素添加圆角边框: 代码: div {    border-radius:5px; } 弧度可根据实际情况进行调整,个人认为5px较为合适 也可上下左右分开表示: 例: border-radius:5px; 等价于...
  • z437955114
  • z437955114
  • 2015-06-14 15:26
  • 2523

纯CSS实现画圆功能

Document          .cicle{         margin:0 auto;         ...
  • lm2813793139
  • lm2813793139
  • 2014-09-30 16:06
  • 4477

CSS之弧形阴影

简述下面我们来讲述如何用CSS来实现一个弧形阴影。简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码阴影效果首先实现一个简单的阴影效果<!DOCTYPE html> <html> <head> <style type='text/css...
  • u011012932
  • u011012932
  • 2016-03-16 16:44
  • 2928

css技巧:实现圆角、阴影、透明效果

CSS技巧:圆角效果 切1个透明的圆形图片(这个图片要求圆角内测是透明的,而外侧是不透明的),用绝对定位来显示4个圆角,这样做的好处是只使用1个图片,即可以实现任何大小,任何背景颜色的box圆角,代码如下:     .b_box_ie{   &...
  • yannan1990
  • yannan1990
  • 2015-03-22 09:45
  • 759
    个人资料
    • 访问:267825次
    • 积分:3472
    • 等级:
    • 排名:第11357名
    • 原创:110篇
    • 转载:0篇
    • 译文:0篇
    • 评论:38条
    最新评论