用CSS绘制图形和形状

最新推荐文章于 2023-04-01 07:00:00 发布
最新推荐文章于 2023-04-01 07:00:00 发布
阅读量256 收藏 1
点赞数
分类专栏： CSS 前端 CSS3 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XJ5210224/article/details/89201578
版权
前端 同时被 3 个专栏收录
37 篇文章 0 订阅
订阅专栏
CSS
4 篇文章 0 订阅
订阅专栏
CSS3
3 篇文章 0 订阅
订阅专栏 
//太极八卦图
.warp{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(to right,#fff 50%,#000 50%);
        }
        .inner{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .white{
            background-color: #fff;
        }
        .black{
            background-color: #000;
        }
        .inner:after{
            content: '';
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .white:after{
            background-color: #000;
        }
        .black:after{
            background-color: #fff;
        }
<div class="warp">
    <div class="inner white"></div>
    <div class="inner black"></div>
</div>

 

//心形
.heart{
            position: relative;
            background-color: red;
            width: 300px;
            height: 300px;
            transform: rotate(45deg);
            margin: auto;
            top: 100px;
        }
        .heart:before, .heart:after{
            content: '';
            position: absolute;
            top: 0;
            left: -150px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: red;
        }
        .heart:after{
            top: -150px;
            left: 0;
        }
/*椭圆形*/
.oval{
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 100px/50px;
}
/*上三角/下三角/左三角/右三角*/
  #triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      /*border-top: 100px solid red;*/
  }
/*左上角/右上角/左下角/右下角*/
  #triangle-topleft {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid transparent;
      /*border-bottom: 100px solid red;*/
      /*border-left: 100px solid transparent;*/
  }

箭头

45个炫酷的 CSS 形状（值得收藏）

#curvedarrow {
 position: relative;
 width: 0;
 height: 0;
 border-top: 9px solid transparent;
 border-right: 9px solid red;
 transform: rotate(10deg);
}
#curvedarrow: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;
 transform: rotate(45deg);
}

梯形

45个炫酷的 CSS 形状（值得收藏）

#trapezoid {
 border-bottom: 100px solid red;
 border-left: 25px solid transparent;
 border-right: 25px solid transparent;
 height: 0;
 width: 100px;
}

星星 (6角)

45个炫酷的 CSS 形状（值得收藏）

#star-six {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 position: relative;
}
#star-six: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;
}

星星 (5角)

45个炫酷的 CSS 形状（值得收藏）

#star-five {
    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;
    transform: rotate(35deg);
}
#star-five: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: '';
    transform: rotate(-35deg);
}
#star-five: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;
    transform: rotate(-70deg);
    content: '';
}

五边形

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

六边形

 

        .hexagon{
            position: relative;
            width: 100px;
            height: 55px;
            background-color: red;
        }
        .hexagon: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;
        }
        .hexagon:after{
            content: '';
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 25px solid red;
        }

 

八边形

        .octagon{
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .octagon: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;
        }
        .octagon: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;
        }

 

心形

45个炫酷的 CSS 形状（值得收藏）

        .heart{
            position: relative;
            width: 100px;
            height: 90px;
        }
        .heart:before,.heart:after{
            position: absolute;
            content: '';
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background-color: 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%;
        }
        .heart: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%;
        }

无限符图案

 

        .infinity{
            position: relative;
            width: 212px;
            height: 100px;
        }
        .infinity:before,.infinity:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border: 20px solid red;
            border-radius: 50px 50px 0 50px;
            -moz-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);
        }
        .infinity:after{
            left: auto;
            right: 0;
            border-radius: 50px 50px 50px 0;
            -moz-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);
        }

菱形

 

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

砖石盾牌

 

        .diamond-shield{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 20px solid red;
            position: relative;
            top: -50px;
        }
        .diamond-shield:after{
            content: '';
            position: absolute;
            left: -50px;
            top: 20px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
        }

吃豆人

         .pacman{
            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;
        }

 

圆锥形

        .cone{
            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%;
        }

 

月亮

        .moon{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 red;
        }

钻戒

45个炫酷的 CSS 形状（值得收藏）

 

#diamond-narrow {
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-bottom: 70px solid red;
 position: relative;
 top: -50px;
}
#diamond-narrow:after {
 content: '';
 position: absolute;
 left: -50px;
 top: 70px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 70px solid red;
}

钻石2

45个炫酷的 CSS 形状（值得收藏）

 

#cut-diamond {
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 0 25px 25px 25px;
 height: 0;
 width: 50px;
 box-sizing: content-box;
 position: relative;
 margin: 20px 0 50px 0;
}
#cut-diamond: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;
}

蛋蛋

45个炫酷的 CSS 形状（值得收藏）

 

#egg {
 display: block;
 width: 126px;
 height: 180px;
 background-color: red;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

29.对话泡泡

45个炫酷的 CSS 形状（值得收藏）

 

#talkbubble {
 width: 120px;
 height: 80px;
 background: red;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#talkbubble: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;
}

30. 12点 爆发

45个炫酷的 CSS 形状（值得收藏）

 

#burst-12 {
 background: red;
 width: 80px;
 height: 80px;
 position: relative;
 text-align: center;
}
#burst-12:before,
#burst-12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: red;
}
#burst-12:before {
 transform: rotate(30deg);
}
#burst-12:after {
 transform: rotate(60deg);
}

31. 8点 爆发

45个炫酷的 CSS 形状（值得收藏）

 

#burst-8 {
 background: red;
 width: 80px;
 height: 80px;
 position: relative;
 text-align: center;
 transform: rotate(20deg);
}
#burst-8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: red;
 transform: rotate(135deg);
}

32.太极

45个炫酷的 CSS 形状（值得收藏）

 

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

33.徽章丝带

45个炫酷的 CSS 形状（值得收藏）

 

#badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
 content: '';
 position: absolute;
 border-bottom: 70px solid red;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 top: 70px;
 left: -10px;
 transform: rotate(-140deg);
}
#badge-ribbon:after {
 left: auto;
 right: -10px;
 transform: rotate(140deg);
}

34.太空入侵者（电脑游戏名）

45个炫酷的 CSS 形状（值得收藏）

#space-invader{
    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: 50px 0 70px 65px;
}

35.电视

45个炫酷的 CSS 形状（值得收藏）

 

#tv {
 position: relative;
 width: 200px;
 height: 150px;
 margin: 20px 0;
 background: red;
 border-radius: 50% / 10%;
 color: white;
 text-align: center;
 text-indent: .1em;
}
#tv:before {
 content: '';
 position: absolute;
 top: 10%;
 bottom: 10%;
 right: -5%;
 left: -5%;
 background: inherit;
 border-radius: 5% / 50%;
}

36.雪佛龙

45个炫酷的 CSS 形状（值得收藏）

 

#chevron {
 position: relative;
 text-align: center;
 padding: 12px;
 margin-bottom: 6px;
 height: 60px;
 width: 200px;
}
#chevron:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 51%;
 background: red;
 transform: skew(0deg, 6deg);
}
#chevron:after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 height: 100%;
 width: 50%;
 background: red;
 transform: skew(0deg, -6deg);
}

37.放大镜

45个炫酷的 CSS 形状（值得收藏）

 

#magnifying-glass {
 font-size: 10em;
 display: inline-block;
 width: 0.4em;
 box-sizing: content-box;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
}
#magnifying-glass:before {
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 transform: rotate(45deg);
}

38.Facebook图标

45个炫酷的 CSS 形状（值得收藏）

 

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

40.旗

45个炫酷的 CSS 形状（值得收藏）

 

#flag {
 width: 110px;
 height: 56px;
 box-sizing: content-box;
 padding-top: 15px;
 position: relative;
 background: red;
 color: white;
 font-size: 11px;
 letter-spacing: 0.2em;
 text-align: center;
 text-transform: uppercase;
}
#flag:after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 0;
 border-bottom: 13px solid #eee;
 border-left: 55px solid transparent;
 border-right: 55px solid transparent;
}

42.十字架

45个炫酷的 CSS 形状（值得收藏）

 

#cross {
 background: red;
 height: 100px;
 position: relative;
 width: 20px;
}
#cross:after {
 background: red;
 content: "";
 height: 20px;
 left: -40px;
 position: absolute;
 top: 40px;
 width: 100px;
}

43.根基

45个炫酷的 CSS 形状（值得收藏）

 

 #base {
 background: red;
 display: inline-block;
 height: 55px;
 margin-left: 20px;
 margin-top: 55px;
 position: relative;
 width: 100px;
}
#base:before {
 border-bottom: 35px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 content: "";
 height: 0;
 left: 0;
 position: absolute;
 top: -35px;
 width: 0;
}

44.指示器

45个炫酷的 CSS 形状（值得收藏）

 

#pointer {
 width: 200px;
 height: 40px;
 position: relative;
 background: red;
}
#pointer:after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 0;
 border-left: 20px solid white;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
}
#pointer:before {
 content: "";
 position: absolute;
 right: -20px;
 bottom: 0;
 width: 0;
 height: 0;
 border-left: 20px solid red;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
}

45.锁

45个炫酷的 CSS 形状（值得收藏）

 

#lock {
 font-size: 8px;
 position: relative;
 width: 18em;
 height: 13em;
 border-radius: 2em;
 top: 10em;
 box-sizing: border-box;
 border: 3.5em solid red;
 border-right-width: 7.5em;
 border-left-width: 7.5em;
 margin: 0 0 6rem 0;
}
#lock:before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 2.5em solid red;
 width: 14em;
 height: 12em;
 left: 50%;
 margin-left: -7em;
 top: -12em;
 border-top-left-radius: 7em;
 border-top-right-radius: 7em;
}
#lock:after {
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 1em solid red;
 width: 5em;
 height: 8em;
 border-radius: 2.5em;
 left: 50%;
 top: -1em;
 margin-left: -2.5em;
}
十一T_T
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
width
Future1994的博客
03-27 646
css 宽度(width)的值一般是具体数值如： 1、Width:50px 这样设置宽度为50px 2、Width:50% 这样设置宽度为父级宽度50% 还有一个宽度值为auto Width:auto 这样宽度就是自动，随内容增加而增宽，随浏览器宽度而换行。 Width auto其实是默认的值，一般我们无需设置此值，不设置即宽度默认为auto（自适应 自动）。 ...
使用CSS绘制几何图形（圆形、三角形、扇形、菱形等
feifei9989的博客
03-25 939
在实际开发中，会出现一些小三角，用icon又不方便，于是我使用css绘制，并进行记录。，让两边的角没那么锐利，但是向内的角暂时没办法更改。，当我没有加的时候，圆形会变成椭圆形。5、具体三角形伪类使用中，可以通过。3、在三角形伪类中：可以适当修改。，则注意在使用伪类的div中加。4、三角形伪类主要是：通过。1、在使用伪类时，要加。
使用CSS绘制各种形状
weixin_55788590的博客
06-22 1035
CSS 能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。 添加一个width和height，您就拥有了所需的确切大小的矩形。 添加border-radius，你可以把那个形状变圆，足够多的你可以把这些矩形变成圆形和椭圆形。 正方形 #square { width: 100px; height: 100px; background: red; } 矩形形状 #rectangle { width: 200px; height: 100px; background: re
CSS绘制各种各样的形状图形
cs007711的博客
08-19 1484
我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的形状图形。
CSS画几种图形的方法
老电影故事的博客
04-01 951
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的 border 实现。使用伪元素在一个正方形的元素上创建一个完全重叠的圆形，并使用transform属性将其缩小到所需大小。将一个正方形的元素的border-radius属性设置为50%即可将其变为一个圆形。
JS+CSS3绘制数字科技脸元素图形特效
06-11
JS+CSS3形状外部shape-outside属性绘制数字科技脸元素图形特效，点击页面随机生成很具科技感的人脸图形。
CSS3基本图形
06-15
利用CSS3绘制出的图形的一个集合是一个资源哦 不容错过
purecss-francine：采用18世纪油画风格HTMLCSS绘图。 完全以HTML和CSS手工编码
02-16
SVG的使用受到限制，所有形状只能使用手工绘制的坐标和贝塞尔曲线-无需任何图形编辑器的帮助。 （注意：在某一时刻，我使用了一个或两个SVG元素，但最终我对它们感到厌倦，因此已将它们删除，因此该规则不再适用。...
purecss-gaze:带有意大利文艺复兴时期绘画风格HTMLCSS绘图。完全以HTML和CSS手工编码
03-19
SVG的使用受到限制，并且所有形状只能使用手工绘制的坐标和贝塞尔曲线-无需任何图形编辑器的帮助。 （注意：有一次我使用了一个或两个SVG元素，但最终我对它们感到厌倦，因此已将它们删除，因此该规则不再适用。对...
【前端素材】模板-多种实用特殊形状.zip
最新发布
04-04
Canvas 动画：通过 HTML5 Canvas 元素绘制图形，利用 JavaScript 控制绘制过程，实现高度可定制化的动画效果，适用于需要实时渲染的复杂动画场景。 WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以...
如何在 CSS 中创建形状
allway2的博客
05-27 1071
在今天的教程中，让我们创建一个可以使用 CSS3 创建的最常见形状的简单列表。我们将通过文章取得进展，最后，您将学习如何创造真正伟大的东西。 本教程将让您深入了解 CSS3 形状以及如何自己创建它们。它涵盖了多种形状，可以真正加快您的网站速度，因为对图像的需求将会减少。让我们开始！ 如果您正在寻找 SVG 的介绍，请查看这篇文章：如何使用 SVG 创建简单形状。 完成本教程需要什么 CSS3的知识 时间和耐心 创建一个 CSS 圆圈 HTML 要在 CSS 中创建一个圆圈，首先我们需要一个
css 常见图形绘制
似水流年QC的博客
09-08 1393
css 常见图形绘制。
如何用 CSS 绘制各种形状
diaolianxian9049的博客
05-05 278
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。 所以可以把两个半径的值都设置成50%； border-radius: 50% / 50...
用CSS绘制最常见的40种形状和图形
xuehu837769474的博客
01-31 2158
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle(圆形) #circl...
用CSS绘制最常见的40种形状和基本图形
細水、長流√的专栏
02-23 927
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; bac
CSS3制作各种形状图像
weixin_34124939的博客
11-23 3800
制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; heig...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
cumi7754的博客
08-16 471
css 绘制三角形Before we start. If you want more free content but in video format. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding. https://www.youtube.com/user/Weibenf...
利用css样式画各种图形--初步、进阶、高级（一）
weixin_33754065的博客
02-17 430
 转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。 下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复...
绘制图形
龟的小号的博客
10-17 195
绘制图形 1、继承JPanel 2、重写画笔方法Paint（Graphics p） 画椭圆、线、线框矩形、填充矩形、设置画笔颜色 g.drawOval(20,20,20,20); //画一个椭圆，左上角的坐标，长，宽 g.drawLine(50,50,60,50); //画线，起点终点坐标 g.drawRect(70,70,10,10); /...
怎么用css绘制像地图标点的图形
08-03
### 回答1： 要使用 CSS 绘制类似地图标点的图形，可以使用圆形来模拟...综上所述，可以通过使用CSS的伪元素、伪类、定位、动画和文本属性来绘制像地图标点的图形，并通过调整相关属性和样式来实现各种效果和交互响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值