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

这篇博客介绍了如何利用CSS来创建各种几何图形,包括实心圆、空心圆、半圆、扇形、鸡蛋、椭圆、胶囊、三角形和月亮形状。通过调整边框、圆角、渐变和定位等属性,可以实现不同效果。文章还展示了创建折纸效果的技巧,并提供了详细的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

实心圆

圆环(空心圆)

半圆

四分之一圆(扇形)

鸡蛋

椭圆

胶囊

三角形

把不需要的那边设置成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);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值