利用CSS进行各种图形的绘制

最新推荐文章于 2024-06-18 10:00:00 发布

骑着毛驴的小猴子

最新推荐文章于 2024-06-18 10:00:00 发布

阅读量314

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_31765427/article/details/73929655

版权

本文详细介绍了如何利用CSS来创建各种图形，包括正方形、长方形、圆形、椭圆、三角形、梯形、平行四边形、六角形、五角星、五边形、六边形、八边形、心形、无穷大符号、菱形、钻石、鸡蛋形状、对话框、阴阳图以及常见的图标如搜索图标和月亮形状。

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

<body>
        <div id="square"></div>
        <!--正方形-->
        <div id="rectangle"></div>
        <!--长方形-->
        <div id="circle"></div>
        <!--圆-->
        <div id="oval"></div>
        <!--椭圆-->
        <div id="triangle_up"></div>
        <!--向上的等腰直角三角形-->
        <div id="triangle_right"></div>
        <!--向右的等腰直角三角形-->
        <div id="triangle_bottom"></div>
        <!--向下的等腰直角三角形-->
        <div id="triangle_left"></div>
        <!--向左的等腰直角三角形-->
        <div id="triangle_db_up"></div>
        <!--向上的等边三角形-->
        <div id="triangle_db_right"></div>
        <!--向右的等边三角形-->
        <div id="triangle_db_bottom"></div>
        <!--向下的等边三角形-->
        <div id="triangle_db_left"></div>
        <!--向左的等边三角形-->
        <div id="triangle_top_left"></div>
        <!--右上为直角边-->
        <div id="triangle_top_right"></div>
        <!--左上为直角边-->
        <div id="triangle_bottom_left"></div>
        <!--下右为直角边-->
        <div id="triangle_bottom_right"></div>
        <!--下左为直角边-->
        <div id="trapezoid"></div>
        <!--等腰梯形-->
        <div id="parallelogram"></div>
        <!--平行四边形-->
        <div id="star-six"></div>
        <!--六角星-->
        <div id="star-five"></div>
        <!--五角星-->
        <div id="pentagon"></div>
        <!--五边形-->
        <div id="hexagon"></div>
        <!--六边形-->
        <div id="octagon"></div>
        <!--八边形-->
        <div id="heart"></div>
        <!--心-->
        <div id="infinity"></div>
        <!--无穷大-->
        <div id="diamond"></div>
        <!--菱形-->
        <div id="diamond-shield"></div>
        <div id="diamond-narrow"></div>
        <div id="cut-diamond"></div>
        <!--钻石-->
        <div id="egg"></div>
        <!--鸡蛋-->
        <div id="talkbubble"></div>
        <!--对话框-->
        <div id="yin-yang"></div>
        <!--阴阳图-->
        <div id="magnifying-glass"></div>
        <!--搜索图标-->
        <div id="moon"></div>
        <!--月亮-->
    </body>

正方形

#square {
                width: 100px;
                height: 100px;
                background-color: deepskyblue;
            }

这里写图片描述

长方形

#rectangle {
                width: 200px;
                height: 100px;
                background-color: deepskyblue;
            }

这里写图片描述

圆形

#circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: deepskyblue;
            }

这里写图片描述

椭圆

#oval {
                width: 200px;
                height: 100px;
                border-radius: 50%;
                background-color: deepskyblue;
            }

等腰直角三角形

#triangle_up {
                width: 0px;
                height: 0px;
                border: 50px solid transparent;
                border-bottom-color: deepskyblue;
            }

向上的等腰直角三角形

#triangle_right {
                width: 0px;
                height: 0px;
                border: 50px solid transparent;
                border-left-color: deepskyblue;
            }

向右的等腰直角三角形

#triangle_bottom {
                width: 0px;
                height: 0px;
                border: 50px solid transparent;
                border-top-color: deepskyblue;
            }

向下的等腰直角三角形

#triangle_left {
                width: 0px;
                height: 0px;
                border: 50px solid transparent;
                border-right-color: deepskyblue;
            }

最低0.47元/天解锁文章

骑着毛驴的小猴子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用CSS进行各种图形的绘制

<body> <div id="square"></div>  <div id="rectangle"></div>  <div id="circle"></div>  <div id="oval"></div> <!
复制链接

扫一扫

专栏目录