CSS绘制各种各样的形状图形

目录

实心圆

圆环（空心圆）

半圆

四分之一圆（扇形）

鸡蛋

椭圆

胶囊

三角形

月亮

编辑​​做折纸效果

---

目录

实心圆

圆环（空心圆）

半圆

四分之一圆（扇形）

鸡蛋

椭圆

胶囊

三角形

把不需要的那边设置成transparent；

月亮

---

我们在编写前端代码时，经常会遇到各种各样的形状图形（如：三角形，圆角边框、圆等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的形状图形。

实心圆

圆环（空心圆）

 box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。

box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。

●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。

●border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

 

半圆

四分之一圆（扇形）

比半圆少一边的值

鸡蛋

 原理图：

看成一个半圆，和一个半椭圆。

椭圆

长宽一样，border-radius: 100%，就是圆；长宽不一样，border-radius: 100%就是椭圆，

胶囊

把长设置成比宽大，否则就是圆。

三角形

实现原理：

把不需要的那边设置成transparent（透明）；

月亮

把宽高设成一样。

做折纸效果

note还是原来的note，仅仅是给note加了一个before伪元素。设置伪元素宽度为0，内容为空。利用边框做出三角形效果，然后通过绝对定位到右上角，最后加上阴影效果就ok啦。

代码例如以下：

.note{
	display:block; 
	margin:100px auto;
	100px;
	height:100px;
	background:#ff0;
	padding:50px;
	position:relative;
}
.note:before{
	content:"";
	0;
	border-color:#fff #fff transparent transparent;
	border-style:solid;
	border-20px;
	position:absolute;
	top:0;
	right:0;

        box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}