曾闻巨佬云，CSS者，码农家之装潢也。远观之，如风静而縠纹平；细察之，如瑰石而灵光耀。相传遗留三十余物称之静姝，后人拾其贡之于堂，以图庇佑其子嗣，显名于四方，通达其祖技，居功其庙堂。

前言

相信大家都听到过“能用CSS实现的就别用图片”这句话，毕竟CSS代码的体积比图片要小得多。那么今天就给大家分享30个 CSS 静态形状，希望各位朋友喜欢❤️。

代码

1. 椭圆

椭圆.png

.oval {width: 200px;height: 100px;background-color: skyblue;border-radius: 100px / 50px;
}
复制代码

2. 上三角

上三角.png

.triangle-up {width: 0;height: 0;border-right: 50px solid transparent;border-bottom: 100px solid skyblue;border-left: 50px solid transparent;
}
复制代码

3. 下三角

下三角.png

.triangle-down {width: 0;height: 0;border-top: 100px solid skyblue;border-right: 50px solid transparent;border-left: 50px solid transparent;
}
复制代码

4. 左三角

左三角.png

.triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid skyblue;border-bottom: 50px solid transparent;
}
复制代码

5. 右三角

右三角.png

.triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 100px solid skyblue;
}
复制代码

6. 左上角

左上角.png

.triangle-topleft {width: 0;height: 0;border-top: 100px solid skyblue;border-right: 100px solid transparent;
}
复制代码

7. 右上角

右上角.png

.triangle-topright {width: 0;height: 0;border-top: 100px solid skyblue;border-left: 100px solid transparent;
}
复制代码

8. 左下角

左下角.png

.triangle-bottomleft {width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 100px solid skyblue;
}
复制代码

9. 右下角

右下角.png

.triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid skyblue;border-left: 100px solid transparent;
}
复制代码

10. 箭头

箭头.png

.curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid skyblue;transform: rotate(10deg);
}.curvedarrow:after {position: absolute;top: -12px;left: -9px;width: 12px;height: 12px;content: '';border: 0 solid transparent;border-top: 3px solid skyblue;border-radius: 20px 0 0 0;transform: rotate(45deg);
}
复制代码

11. 平行四边形

平行四边形.png

.parallelogram {width: 100px;height: 100px;background-color: skyblue;transform: skew(20deg);
}
复制代码

12. 梯形

梯形.png

.trapezoid {width: 100px;height: 0;border-right: 25px solid transparent;border-bottom: 100px solid skyblue;border-left: 25px solid transparent;
}
复制代码

13. 五边形

五边形.png

.pentagon {position: relative;width: 54px;border-width: 50px 18px 0;border-style: solid;border-color: skyblue transparent;box-sizing: content-box;
}.pentagon:before {position: absolute;top: -85px;left: -18px;height: 0;width: 0;content: '';border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent skyblue;
}
复制代码

14. 六边形

六边形.png

.hexagon {position: relative;width: 100px;height: 55px;background-color: skyblue;
}.hexagon:before {position: absolute;top: -25px;left: 0;width: 0;height: 0;content: '';border-right: 50px solid transparent;border-bottom: 25px solid skyblue;border-left: 50px solid transparent;
}.hexagon:after {position: absolute;bottom: -25px;left: 0;width: 0;height: 0;content: '';border-top: 25px solid skyblue;border-right: 50px solid transparent;border-left: 50px solid transparent;
}
复制代码

15. 爱心 ❤️

爱心.png

.heart {position: relative;width: 100px;height: 90px;
}.heart:before,
.heart:after {position: absolute;left: 50px;top: 0;width: 50px;height: 80px;content: '';background-color: skyblue;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;
}.heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;
}
复制代码

16. 无穷大

无穷大.png

.infinity {position: relative;width: 150px;height: 100px;box-sizing: content-box;
}.infinity:before,
.infinity:after {position: absolute;top: 0;left: 0;width: 30px;height: 30px;content: '';border: 20px solid skyblue;border-radius: 50px 50px 0 50px;box-sizing: content-box;transform: rotate(-45deg);
}.infinity:after {left: auto;right: 0;border-radius: 50px 50px 50px 0;transform: rotate(45deg);
}
复制代码

17. 钻石

你竟然是这么神奇的 CSS相关推荐

神奇的css（动态水滴）
当看到你的时候,哇哦,这感觉来了!好神奇的css吖效果(是动态的水滴,这里只是一帧图片) 水滴样式网址代码 <!DOCTYPE html> <html lang="en ...
2天驾驭div+css_老婆竟然只知道几个css伪类，不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用.我也拗不过她,而且其实我也挺佩服的.所以就教她了.最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类 ...
神奇的CSS用法之border-radius
前言近期看到一个css实现水滴效果视频,本着知其然知其所以然的心理对其研究了一番,整理了一下保姆级的border-radius教学分享给大家了解作用如果工作碰到有不配合的ui不愿意给你特效的gi ...
神奇的 CSS，让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看 ...
神奇的CSS，页面镂空文字（渐变文字升级）
实现镂空文字的原理就是两个重合的div,底层的div上正在使用视频.GIF.图片皆可,顶层的div上面输出想要镂空的文字,然后通过-webkit-background-clip: text;进行文字的 ...
基于一段神奇的CSS渐变制作噪点效果
提及噪点效果,首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果.如果你没有看过那种旧电视,可以看下面的gif动图,真实的情况噪点的变化速度会快很多,这里为了gif的大小,截取的时间较短供 ...
shell开启飞行模式_手机飞行模式竟然有这些神奇功能？！别说小坊没告诉你
首先小坊先说个笑话明明给手机开了飞行模式, 为什么从五楼掉下去还是把屏幕摔碎了? 言归正传说到"飞行模式", 很多朋友们都会说, 我又不坐飞机,要它有啥用? 那么小坊告诉各位 ...
CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
顶尖CSS Web设计师Andy Clarke访谈
2019独角兽企业重金招聘Python工程师标准>>> 简单介绍IOTBS之后,现在介绍其中一个设计师Andy Clarke,他是Stuff and Nonsense创意总监.And ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...

你竟然是这么神奇的 CSS

前言

代码

1. 椭圆

2. 上三角

3. 下三角

4. 左三角

5. 右三角

6. 左上角

7. 右上角

8. 左下角

9. 右下角

10. 箭头

11. 平行四边形

12. 梯形

13. 五边形

14. 六边形

15. 爱心 ❤️

16. 无穷大

17. 钻石

你竟然是这么神奇的 CSS相关推荐

最新文章

热门文章

你竟然是这么神奇的 CSS

前言

代码

1. 椭圆

2. 上三角

3. 下三角

4. 左三角

5. 右三角

6. 左上角

7. 右上角

8. 左下角

9. 右下角

10. 箭头

11. 平行四边形

12. 梯形

13. 五边形

14. 六边形

15. 爱心 ❤️

16. 无穷大

17. 钻石 insertAdIfNeeded();

你竟然是这么神奇的 CSS相关推荐

最新文章

热门文章

17. 钻石