用CSS绘制形状和图形

最新推荐文章于 2024-04-18 00:50:42 发布
最新推荐文章于 2024-04-18 00:50:42 发布
阅读量200 收藏 2
点赞数 1
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/103696058
版权

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大。

html代码：

<div class="box"></div>

在这里插入图片描述
Square(正方形)

	<style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

在这里插入图片描述
Rectangle(矩形)

	<style>
        .box{
            width: 200px;
            height: 100px;
            background: red;
        }
    </style>

在这里插入图片描述
Circle(圆形)

	<style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
        }
    </style>

在这里插入图片描述
Oval(椭圆形)

	<style>
        .box{
            width: 200px;
            height: 100px;
            background: red;
            -moz-border-radius: 100px / 50px;
            -webkit-border-radius: 100px / 50px;
            border-radius: 100px / 50px;
        }
    </style>

在这里插入图片描述
Triangle Up(向上的三角形)

	<style>
        .box{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }
    </style>

在这里插入图片描述
Triangle Down(向下)

	<style>
        .box{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }
    </style>

在这里插入图片描述
Triangle Left(向左)

	<style>
        .box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 100px solid red;
            border-bottom: 50px solid transparent;
        }
    </style>

在这里插入图片描述
Triangle Right(向右)

	<style>
        .box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 100px solid red;
            border-bottom: 50px solid transparent;
        }
    </style>

在这里插入图片描述
Triangle Top Left(左上)

	<style>
        .box{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
        }
    </style>

在这里插入图片描述
Triangle Top Right(右上)

	<style>
        .box{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
        }
    </style>

在这里插入图片描述
Triangle Bottom Left(左下)

	<style>
        .box{
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
        }
    </style>

在这里插入图片描述
Triangle Bottom Right(右下)

	<style>
        .box{
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 100px solid transparent;
        }
    </style>

在这里插入图片描述
Curved Tail Arrow(弯尾箭头)

	<style>
        .box{
            position: relative;
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            }
        .box:after {
            content: "";
            position: absolute;
            border: 0 solid transparent;
            border-top: 3px solid red;
            border-radius: 20px 0 0 0;
            top: -12px;
            left: -9px;
            width: 12px;
            height: 12px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
        }
    </style>

在这里插入图片描述
Trapezoid(梯形)

	<style>
        .box{
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            height: 0;
            width: 100px;
        }
    </style>

在这里插入图片描述
Parallelogram(平行四边形)

<style>
        .box{
            width: 150px;
            height: 100px;
            -webkit-transform: skew(20deg);
            -moz-transform: skew(20deg);
            -o-transform: skew(20deg);
            background: red;
        }
    </style>

在这里插入图片描述
Star (6-points)(六角星)

	<style>
        .box{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            position: relative;
        }
        .box:after{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
            position: absolute;
            content: "";
            top: 30px;
            left: -50px;
        }
    </style>

在这里插入图片描述
Star (5-points)(五角星)

	<style>
        .box{
            margin: 50px 0;
            position: relative;
            display: block;
            color: red;
            width: 0px;
            height: 0px;
            border-right:100px solid transparent;
            border-bottom:70px  solid red;
            border-left:100px solid transparent;
            -moz-transform:rotate(35deg);
            -webkit-transform:rotate(35deg);
            -ms-transform:rotate(35deg);
            -o-transform:rotate(35deg);
        }
        .box:before{
            border-bottom: 80px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
            content: '';
            -webkit-transform:rotate(-35deg);
            -moz-transform:rotate(-35deg);
            -ms-transform:rotate(-35deg);
            -o-transform:rotate(-35deg);
        }
        .box:after{
            position: absolute;
            display: block;
            color: red;
            top: 3px;
            left: -105px;
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            -webkit-transform:rotate(-70deg);
            -moz-transform:rotate(-70deg);
            -ms-transform:rotate(-70deg);
            -o-transform:rotate(-70deg);
            content: '';
        }
    </style>

在这里插入图片描述
Pentagon(五边形)

	<style>
        .box{
            position: relative;
            width: 54px;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
        }
        .box:before{
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            top: -85px;
            left: -18px;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
        }
    </style>

在这里插入图片描述
Hexagon(六边形)

<style>
        .box{
            width: 100px;
            height: 55px;
            background: red;
            position: relative;
        }
        .box:before{
            content: "";
            position: absolute;
            top: -25px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 25px solid red;
        }
        .box:after{
            content: "";
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 25px solid red;
        }
    </style>

在这里插入图片描述
Octagon(八边形)

	<style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
        .box:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 29px solid red;
            border-left: 29px solid #fff;
            border-right: 29px solid #fff;
            width: 42px;
            height: 0;
        }
        .box:after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid red;
            border-left: 29px solid #fff;
            border-right: 29px solid #fff;
            width: 42px;
            height: 0;
        }
    </style>

在这里插入图片描述
Heart(心形)

	<style>
        .box{
            position: relative;
            width: 100px;
            height: 90px;
        }
        .box:before,.box:after{
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            -moz-border-radius: 50px 50px 0 0;
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }
        .box:after{
            left: 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
        }
    </style>

在这里插入图片描述
Infinity(无限符图形)

	<style>
        .box{
            position: relative;
            width: 212px;
            height: 100px;
        }
        .box:before,.box:after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border: 20px solid red;
            -moz-border-radius: 50px 50px 0 50px;
            border-radius: 50px 50px 0 50px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .box:after{
            left: auto;
            right: 0;
            -moz-border-radius: 50px 50px 50px 0;
            border-radius: 50px 50px 50px 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>

在这里插入图片描述
Diamond Square(菱形)

	<style>
        .box{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom-color: red;
            position: relative;
            top: -50px;
        }
        .box:after{
            content: '';
            position: absolute;
            left: -50px;
            top: 50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: red;
        }
    </style>

在这里插入图片描述
Diamond Shield（钻石盾牌）

	<style>
        .box{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 20px solid red;
            position: relative;
            top: -50px;
        }
        .box:after{
            content: '';
            position: absolute;
            left: -50px; top: 20px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
        }
    </style>

在这里插入图片描述
Diamond Narrow

<style>
        .box{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 70px solid red;
            position: relative;
            top: -50px;
        }
        .box:after{
            content: '';
            position: absolute;
            left: -50px; top: 70px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
        }
    </style>

在这里插入图片描述
Cut Diamond(砖石形)

	<style>
        .box{
            border-style: solid;
            border-color: transparent transparent red transparent;
            border-width: 0 25px 25px 25px;
            height: 0;
            width: 50px;
            position: relative;
            margin: 20px 0 50px 0;
        }
        .box:after{
            content: "";
            position: absolute;
            top: 25px;
            left: -25px;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: red transparent transparent transparent;
            border-width: 70px 50px 0 50px;
        }
    </style>

在这里插入图片描述
Egg(鸡蛋)

	<style>
        .box{
            display:block;
            width: 126px;
            height: 180px;
            background-color: red;
            -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
            border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;
        }
    </style>

在这里插入图片描述
Pac-Man(吃豆人)

	<style>
        .box{
            width: 0px;
            height: 0px;
            border-right: 60px solid transparent;
            border-top: 60px solid red;
            border-left: 60px solid red;
            border-bottom: 60px solid red;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }
    </style>

在这里插入图片描述
Talk Bubble（聊天框）

<style>
        .box{
            width: 120px;
            height: 80px;
            background: red;
            position: relative;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            border-radius:10px;
        }
        .box:before{
            content:"";
            position: absolute;
            right: 100%;
            top: 26px;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 26px solid red;
            border-bottom: 13px solid transparent;
        }
    </style>

在这里插入图片描述
12 Point Burst（爆炸形状）

	<style>
        .box{
            background: red;
            width: 80px;
            height: 80px;
            position: relative;
            text-align: center;
        }
        .box:before,.box:after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width: 80px;
            background: red;
        }
        .box:before{
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
        }
        .box:after{
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
        }
    </style>

在这里插入图片描述
Yin Yang(阴阳八卦)

	<style>
        .box{
            width: 96px;
            height: 48px;
            background: #eee;
            border-color: red;
            border-style: solid;
            border-width: 2px 2px 50px 2px;
            border-radius: 100%;
            position: relative;
        }
        .box:before{
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            background: #eee;
            border: 18px solid red;
            border-radius: 100%;
            width: 12px;
            height: 12px;
        }
        .box:after{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: red;
            border: 18px solid #eee;
            border-radius:100%;
            width: 12px;
            height: 12px;
        }
    </style>

在这里插入图片描述
Badge Ribbon(徽章丝带)

<style>
        .box{
            position: relative;
            background: red;
            height: 100px;
            width: 100px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            border-radius:50px;
        }
        .box:before,.box:after{
            content: '';
            position: absolute;
            border-bottom: 70px solid red;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            top: 70px;
            left: -10px;
            -webkit-transform:rotate(-140deg);
            -moz-transform:rotate(-140deg);
            -ms-transform:rotate(-140deg);
            -o-transform:rotate(-140deg);
        }
        .box:after{
            left: auto;
            right: -10px;
            -webkit-transform:rotate(140deg);
            -moz-transform:rotate(140deg);
            -ms-transform:rotate(140deg);
            -o-transform:rotate(140deg);
        }
    </style>

在这里插入图片描述
Space Invader（太空入侵者）

	<style>
        .box{
            box-shadow:
                    0 0 0 1em red,
                    0 1em 0 1em red,
                    -2.5em 1.5em 0 .5em red,
                    2.5em 1.5em 0 .5em red,
                    -3em -3em 0 0 red,
                    3em -3em 0 0 red,
                    -2em -2em 0 0 red,
                    2em -2em 0 0 red,
                    -3em -1em 0 0 red,
                    -2em -1em 0 0 red,
                    2em -1em 0 0 red,
                    3em -1em 0 0 red,
                    -4em 0 0 0 red,
                    -3em 0 0 0 red,
                    3em 0 0 0 red,
                    4em 0 0 0 red,
                    -5em 1em 0 0 red,
                    -4em 1em 0 0 red,
                    4em 1em 0 0 red,
                    5em 1em 0 0 red,
                    -5em 2em 0 0 red,
                    5em 2em 0 0 red,
                    -5em 3em 0 0 red,
                    -3em 3em 0 0 red,
                    3em 3em 0 0 red,
                    5em 3em 0 0 red,
                    -2em 4em 0 0 red,
                    -1em 4em 0 0 red,
                    1em 4em 0 0 red,
                    2em 4em 0 0 red;
            background: red;
            width: 1em;
            height: 1em;
            overflow: hidden;
            margin: 100px 0 70px 100px;
        }
    </style>

在这里插入图片描述
Magnifying Glass（放大镜）

	<style>
        .box{
            font-size: 10em;
            display: inline-block;
            width: 0.4em;
            height: 0.4em;
            border: 0.1em solid red;
            position: relative;
            border-radius: 0.35em;
        }
        .box:before{
            content: "";
            display: inline-block;
            position: absolute;
            right: -0.25em;
            bottom: -0.1em;
            border-width: 0;
            background: red;
            width: 0.35em;
            height: 0.08em;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
        }
    </style>

在这里插入图片描述
Facebook Icon（Facebook图标）

	<style>
        .box{
            background: red;
            text-indent: -999em;
            width: 100px;
            height: 110px;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            border: 15px solid red;
            border-bottom: 0;
        }
        .box:before{
            content: "";
            position: absolute;
            background: red;
            width: 40px;
            height: 90px;
            bottom: -30px;
            right: -37px;
            border: 20px solid #eee;
            border-radius: 25px;
        }
        .box:after{
            content: "";
            position: absolute;
            width: 55px;
            top: 50px;
            height: 20px;
            background: #eee;
            right: 5px;
        }
    </style>

在这里插入图片描述
Cone(圆锥形)

	<style>
        .box{
            width: 0;
            height: 0;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
            border-top: 100px solid red;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
    </style>

在这里插入图片描述
Moon(月亮)

	<style>
        .box{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 red;
        }
    </style>

在这里插入图片描述
Cross（十字架）

	<style>
        .box{
            background: red;
            height: 100px;
            position: relative;
            width: 20px;
            margin:100px auto;
        }
        .box:after {
            background: red;
            content: "";
            height: 20px;
            left: -40px;
            position: absolute;
            top: 40px;
            width: 100px;
        }
    </style>
W Y L
关注
专栏目录
CSS之画常见的图形
dachaoxuexi的博客
02-15 898
polygon函数接收一系列的点来定义形状的边界。每对百分比值代表一个顶点的位置相对于元素本身的宽和高的百分比。该形状的顶点顺序是从正五边形的顶点开始，然后沿逆时针方向定义其余顶点。clip-path属性在不同的浏览器中的支持程度可能不同，特别是在一些老旧的浏览器版本中可能无法正常工作。宽高设置为0，border里其中一个方向设置为想要的颜色，其他的设置为完全透明的颜色。0 100%元素的左下角为变换的原点。原理同三角形，使用两个三角形拼接的。和画三角形差不多，不同的是设置宽高。同圆形，宽高值不一样。
用CSS绘制最常见的40种形状和图形，0基础前端开发
2401_84092143的博客
04-06 866
前端校招精编面试解析大全点击这里免费获取完整版pdf查看女性身体可视化修身工具前端校招精编面试解析大全点击这里免费获取完整版pdf查看。
用CSS绘制最常见的40种形状和图形
2401_84091468的博客
04-18 1101
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题女性身体可视化修身工具总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
用css画几种图形
weixin_44860440的博客
04-23 94
用css画几种图形 1.圆形 /* 圆形 */ .div1 { width: 200px; height: 200px; margin-left: 50px; border-radius: 50%; background: red; } </style> <body> <div class="div1"> ...
CSS3效果：“W”形运行轨迹
weixin_30514745的博客
01-24 95
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; paddi...
CSS图形绘制
落枫秋歌
10-25 334
圆 使用border-radius特性； 代码实现，具体可见jsfiddle.net <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS图形绘制</title> </head> <body> &...
CSS 之 背景样式
Wwinky的博客
07-15 350
样式是用于美化网页，为什么要美化网页呢？ 有效传递页面信息 美化网页，吸引用户 凸显页面的主题 提高用户的体验 想要强调的内容通常使用 <span></span> 标签包裹起来，再对它单独加样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
CSS_shape.zip_CSS 绘制图形
09-21
这些示例文件不仅教你如何创建这些特定的形状，还会让你了解CSS中的一些关键属性，如`border-radius`、`transform`（包括`rotate`、`scale`等）、伪元素（`::before`和`::after`）以及如何结合使用它们来实现复杂的...
纯css3绘制各种图形图标样式代码
11-24
本话题主要聚焦于使用CSS3来绘制各种图形和图标，这是一种高效且灵活的方法，可以替代传统的图像资源，减少页面加载时间，并有利于响应式设计。 首先，CSS3中的`border-radius`属性可以用来创建圆形或椭圆形，例如...
使用css3绘制出各种几何图形
09-27
在CSS3中，我们可以利用边框半径（border-radius）属性来绘制各种几何图形，这大大增强了网页设计的灵活性和创造性。以下将详细介绍如何通过CSS3实现标题中提到的几种几何图形。 1. **圆形** 要创建一个圆形，我们...
CSS技巧：用css绘制漂亮的徽章缎带图形.zip
最新发布
07-06
适用所有需要给用户发徽章的场景啊，可以通过修改CSS，完成徽章颜色，徽章文字，徽章形状的修改。嗯，就是这些吧！很写实漂亮的徽章和缎带效果，推荐下载！ 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、...
CSS的l
weixin_59163379的博客
10-19 538
https://www.gxlsystem.com/qianduan-7505.html 修改滚动条 样式来判断页面大小引入css不同的样式。
css简单画法,几种基本图形的CSS画法。（附源码）
weixin_33662445的博客
08-04 611
CSS 是指层叠样式表，它可以对整个站点的样式和布局进行控制，CSS 对于整个网页布局起到绝对性作用。那么今天 W3Cschool 小编教大家几种基本图形的 CSS 画法。以下附带源码，同学们可以在学习完自己动手练习，加强记忆。正方形/长方形html>w3cschool-编程狮，随时随地学编程.Square{width:200px;height:200px;background-col...
css实现各种形状
acm_cn1234567890的博客
11-04 221
正方形 / 长方形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .square { width: 120px; height: 120px; background-color: #0000FF; } </style>
使用css实现树形结构图
cheerfulDay的博客
01-29 1013
【代码】使用css实现树形结构图
原生js+div+css，动态画结构图/流程图
热门推荐
快乐分享
12-24 1万+
前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。 代码如下，可直接复制粘贴。 html部分： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
weixin_30730053的博客
03-26 302
三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid ...
详细解析：uni-app|vue组件实现跳动的心脏图标纯CSS动效
偏科程序猿
11-27 2382
今天，小凡继续跟大家分享一个非常实用的动效，一颗跳动的心脏动效。大家先别急着往下看，可以先考虑一下，如果我们自己来做一个心形的图形，应该怎样做呢？~（嘘.....悄悄告诉大家，小凡我刚开始时也没想出来，而且还是那种一点思路都没有的o(╥﹏╥)o），好啦，想不出来也没关系，大家继续往下看吧！O(∩_∩)O
如何使用html，包括css，js 画思维导图？有哪些可用的方法？
Itmastergo的博客
08-07 2030
上面的代码只是一个非常简单的示例，最终效果并不美观，只是用于演示思维导图的绘制过程。你可以根据自己的需求和设计风格进行修改和扩展，使其符合你的实际应用场景。将HTML文件、CSS文件和JavaScript文件放在同一目录下，然后在浏览器中打开HTML文件，即可看到绘制出的思维导图。首先，创建一个新的HTML文件，可以使用任何文本编辑器。在文件中添加必要的标签和结构来定义网页的内容和布局。的CSS文件，用于定义思维导图的样式。的JavaScript文件，用于实现思维导图的绘制逻辑。在同一目录下创建一个名为。
CSS代码绘制图形：从简单到复杂
"这篇资源主要介绍了如何使用CSS代码来创建各种形状的图形，包括正方形、长方形、三角形（四个方向）、平行四边形、梯形以及六角星等，旨在帮助读者熟悉和掌握CSS的形状绘制能力。" 在Web开发中，CSS（层叠样式表）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值