CSS绘制常用小图形

最新推荐文章于 2023-03-04 13:05:40 发布

YLSkye

最新推荐文章于 2023-03-04 13:05:40 发布

阅读量241

点赞数

分类专栏：前端重学之路---CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_22113627/article/details/107410483

版权

这篇博客总结了使用CSS绘制三道杠、双层圆点以及三角形和梯形的方法，包括利用padding、background-clip、border-style和border-radius等属性来实现各种图形效果。

摘要由CSDN通过智能技术生成

CSS 常用图形总结（不定时，边学边更新）

2020/7/17总结

2020/7/17总结

三道杠（移动端常见）

利用padding和background-clip实现

.icon-menu{
   
            display: inline-block;
            width: 140px;
            height: 10px;
            padding: 35px 0;
            border-top: 10px solid

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YLSkye

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS常见的图形绘图

weixin_29947843的博客

05-02

202

1.圆形 .circle{ width: 100px; height: 100px; background-color:red; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } 2.正方形 #square { width:100px; height: 100px; background: red;

用CSS绘制最常见的40种形状和图形

zqf1314的博客

10-24

1750

用CSS绘制最常见的40种形状和图形分享：今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red;...

参与评论您还未登录，请先登录后发表或查看评论

css超实用可爱小图标

weixin_53603040的博客

11-16

774

举例这是一颗小爱心哦 <div class="heart-solid icon"></div> css .heart-solid.icon { color: #000; position: absolute; margin-top: 6px; margin-left: 5px; width: 9px; height: 9px; border-left: solid 1px currentColor; border-bottom: solid 1p

CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形

最新发布

肥晨开发的学习之路

03-04

1万+

css裁剪（clip-path）这个属性平时率非常低。但是其实clip并不是CSS3的新属性，很早就开始出现了。CSS裁剪的这一概念最早是在CSS 2.1时代由clip属性引入，但该属性的限制非常多。裁剪初期只能应用于绝对定位的元素，并且只能裁剪成矩形。而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。

css剪裁clip-path——基本图形剪裁

朝阳39的博客

11-15

2102

矩形 inset() rect()函数的4个值只对应2个方位，分别是元素的上、左、上、左。 inset()函数的4个值对应4个方位，分别是元素的上、左、下、右。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/88be5747d3cc42b4a59af93d324c437e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pyd6Z.

CSS实战---高科技感数据看板（管理层决策大屏演示）

乱世刀疤

03-04

6736

科技感十足的大屏演示数据看板，让老板们更欣赏你的逻辑思维和技术才能。

CSS从大图中抠取小图教程

11-13

2576

相信大家在学习浏览网页过程中，经常会遇到很多小图标放在一起组成一张大图的情况，通俗的说就是CSS从大图中抠取小图，实际上用到的技术就是CSS Sprites (雪碧图)技术，这样做的好处很多，一个是管理图片方便，最重要的一点是可以优化网络加载速度，因为浏览器同时发起的网络请求是有限的，所以，对于这些很小的图片，把它们合并在一起，通过一个请求加载下来，可以节约网络资源，提高加载速度，这里就不展开说了

纯CSS3绘制漫画小女孩特效

04-25

【纯CSS3绘制漫画小女孩特效】是一个利用现代CSS3技术实现的创新性视觉效果，它展示了CSS3在图形渲染和动画方面的强大能力。这个特效不仅仅是一个静态的图像，而是通过CSS3的属性和技巧，使得漫画小女孩具有了动态感...

CSS3病毒病原体图形特效

04-25

这个特效的实现主要依赖于一个名为`css-doodle`的库，该库是CSS画布的一个实验性框架，它允许开发者使用类似JavaScript的语法来绘制复杂的CSS图形。首先，让我们深入了解`css-doodle`。这是一个Web组件，提供了...

纯CSS3绘制海绵宝宝表情特效

04-25

【纯CSS3绘制海绵宝宝表情特效】是一种利用现代Web技术，特别是CSS3的强大功能来创建动态、交互式图形的方法。CSS3（Cascading Style Sheets Level 3）是CSS的最新版本，它引入了许多新特性，使网页设计更加丰富多彩...

css绘制图形

u010037043的专栏

05-11

557

第一次想用css绘制图形是在做一个列表时，想用三角形作为列表的图标，后来发现，css可以绘制各种图形，主要是利用border属性。一、三角形根据不同的border设置可以绘制上三角，下三角，左三角，右三角等各种三角形，这里介绍下三角。 1.将元素大小设置为0 。 #triangle-down { width: 0; height: 0; }

纯CSS实现状态圆点

weixin_42194386的博客

11-06

1万+

不多说，直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

CSS实现圆点

qq_35628430的博客

08-05

1万+

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .circle{  width: 10...

css3实现小箭头，各种图形

热门推荐

tangtang5963的博客

05-25

3万+

https://segmentfault.com/a/1190000002780453#articleHeader18 css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了 #triangle-up {display:inline-block;width:0;height:0;border-left:30px solid transp

CSS绘制各种形状

小头Sophia

03-02

2109

1.伪类：a:hover a:link div:nth-child(n) 伪元素：before after first-letter 2.使用before和after必须要有content这个属性 3.before和after默认是行内元素，行内元素是没有宽高的。 4.加了浮动或者绝对定位的元素，默认把行内元素转换为行内块元素。 5.

纯CSS3绘制饮料杯子特效

04-25

"纯CSS3绘制饮料杯子特效"是利用CSS3的先进特性，特别是动画（animation）属性，来创建一个逼真的黄色咖啡杯图形。这个特效不仅展示了CSS3的强大，也体现了前端开发中的艺术与技术的完美结合。首先，让我们深入...

用css绘制各种图形

Andy

07-11

198

1、三角形 [triangle] 推导过程： <style> .triangle { width: 10px; height: 10px; border: 50px solid; /* 上右下左 */ border-color: red yellow blue green; } </style> <div cl

利用css伪类制作空心圆、半空心圆、双层空心圆

zhizunbaonb777的博客

06-23

2650

body { padding: 10%; color: #fff; } /*空心圆*/ .kxy { margin: 10px 0; width: 10px; height: 10px; background-color: #fff;/*background-color: transparent;*/ position: relative; border-radius: 50%; border: 5px solid red; } /*end 空心圆*/ ...

【CSS之美】原来纯CSS也能绘制人物头像

dac_bb的专栏

03-19

2255

这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘，用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。温馨提示：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中