前言

北京时间2021年10月7日，神舟十三号载人飞船与长征二号F遥十三运载火箭组合体已转运至发射区。我们的征途是星辰大海，专业的人做专业的事，上天我们暂时是上不去了，但是CSS造一架小火箭，我们还是可以的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS制作三角形的原理

原理其实很简单：通过修改border的参数来制作。

下面举几个例子来详细介绍一下三角形怎么做的

上三角的制作

通过给border设置距离大小、样式，只让border-top添加颜色green，其他都填充透明色，就可以做成以下效果。

代码如下（示例）：

    <style>
        .box {
            width: 0;
            height: 0;
            border-top: 30px solid green;
            border-left: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>

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

效果如下（示例）：

右三角的制作

同理：通过给border设置距离大小、样式，只让border-right添加颜色red，其他都填充透明色，就可以做成以下效果。

代码如下（示例）：

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

效果如下（示例）：

二、小火箭的制作

学会了基本的制作原理，接下来让我们开始造小火箭。

代码如下（示例）：

    <style>
        .box {
            width: 60px;
        }
        
        .box1 {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-bottom: 30px solid rgb(253, 112, 18);
            border-right: 30px solid transparent;
        }
        
        .box2 {
            width: 0;
            height: 0;
            border-left: 60px solid red;
            border-bottom: 60px solid rgb(40, 218, 143);
        }
        
        .box3 {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-right: 15px solid black;
            border-bottom: 15px solid rgb(156, 107, 158);
            border-left: 0px solid transparent;
        }
        
        .box4 {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: -5px;
            background-color: rgb(255, 232, 104);
        }
        
        .box5 {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: -5px;
            border-top: 15px solid transparent;
            border-left: 15px solid black;
            border-bottom: 15px solid rgb(156, 107, 158);
            border-right: 0px solid transparent;
        }
        
        .box6 {
            display: inline-block;
            width: 0;
            height: 0;
            margin-top: -10px;
            border-left: 15px solid red;
            border-bottom: 40px solid transparent;
        }
        
        .box7 {
            display: inline-block;
            width: 0;
            height: 0;
            margin-top: -4px;
            margin-left: 25px;
            border-right: 15px solid red;
            border-bottom: 40px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
    </div>