CSS如何画一个三角形 + CSS如何画月亮

单片机开发小白

已于 2022-08-29 18:08:55 修改

阅读量576

点赞数

分类专栏： CSS面试题文章标签：前端 css

于 2022-08-29 00:10:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47075145/article/details/126576135

版权

CSS面试题专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS绘制三角形和月亮图案。通过巧妙地利用border属性和box-shadow等特性，可以轻松创建这些图形，无需额外的图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS画三角形

利用border属性就可以。

原理如下：

给一个元素设置宽高都为0，

width: 0px;
height: 0px;

然后元素的4个方向的边框都设置一样的样式，颜色透明：

border: 100px solid transparent;

然后要哪边成三角形，就把哪边的颜色透明改变就行。

border-right-color:blue ;

原理简图如下：

分析：所以会这样分

eg：

    <style>
        .box{
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-right-color:blue ;
        }
    </style>
    <div class="box"></div>

代码也可以这样写：

    <style>
        .box{
            width: 0px;
            height: 0px;
            border-bottom:100px solid transparent;
            border-top: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid blue;
        }
    </style>
    <div class="box"></div>

2.CSS画月亮

主要是利用了：box-shadow盒子阴影，boder-radius元素圆角边框，

background-color:transparent元素背景设置为透明实现的。

    <style>
        .box{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            /*设置元素圆角边框 将元素设置为一个圆形*/
            border-radius: 50%;
            /* 左偏移量，右偏移量，模糊距离，阴影颜色 */
            box-shadow: -50px 50px 0px orange; 
            /* 将元素背景设置为透明，遮住阴影一部分，使得阴影出现月亮形状 */
            background-color: transparent;
        }
    </style>
    <div class="box"></div>