前言

北京时间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>

效果如下（示例）：

总结

今天，你学废了吗？

神州十三号就位，小火箭先去探探路相关推荐

Android桌面悬浮窗进阶，QQ手机管家小火箭效果实现
这次我们将代码的重点放在火箭升空的效果上,因此简单起见,就直接在模仿360手机卫士悬浮窗的那份代码的基础上继续开发了,如果你还没有看过那篇文章的话,建议先去阅读 Android桌面悬浮窗效果实现,仿3 ...
不同主体公众号跳转小程序_公众号和小程序的区别
其实公众号和小程序都是微信的衍生功能,同时微信的产品.但是它们的功能不同.公众号更倾向于引流,主要是通过持续的输出有价值的文案视频图片来吸引大量的粉丝(顾客),并且培育粉丝最终获得收益.(在这里特别提 ...
拖拽升空的Android小火箭
先上演示效果 1.MainActivity 主布局就两个Button按钮 :一开启.二关闭就不贴主布局xml了因为小火箭是游离在activity之外的,所以不能依赖activity的生命周期需要 ...
公众号和小程序可以同名了名称支持同主体复用
公众号和小程序不能同名?现在可以了!以前,小程序的名称不能和现有的公众号同名,现在支持同主体的情况下,小程序和公众号可以同名了.公众号.小程序在名称唯一的前提下,支持同主体的公众号与小程序名称复用. ...
微信公众号与小程序数据互通
背景最近做了一个有意思的功能<官网内容订阅>,用户在官网扫码后可以订阅官网栏目,订阅栏目后发送模版消息提醒用户订阅成功,模版消息关联了小程序,然后做了一个小程序来管理用户订阅的栏目,小程 ...
python开发跟淘宝有关联微_为什么微商和淘宝卖家不得不做公众号和小程序？
文/王爷整理/叨叨最近一个月,微信方面的动作比较多,尤其是有关微信小程序方面的动态,起码更新了4次.或许很多人还不知道什么是微信小程序,简单来说就是一个无需安装.即用即走的生长在微信上的一个应用. ...
数据结构和算法 | 第一部分第二课：小鸭子们去旅行
作者谢恩铭,公众号「程序员联盟」. 转载请注明出处. 原文:https://www.jianshu.com/p/31d14bd080d4 内容简介引出算法复杂度的故事两种算法两种算法的对比第 ...
Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果
功能分析: 1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中: 2.小火箭挂载在手机窗体 ...
微信小程序：“去中心化”的社交电商，电商正转向以商品为核心
微信小程序的平均日活用户已经超过5亿人,小程序已经全面融入到我们的生活.工作.娱乐等各个场景中.而通过小程序,中国的电子商务也从"中心化"的平台电商逐渐转变为"去中心化& ...
微信公众号采集小爬虫
最近在做一个自己的项目,涉及到需要通过python爬取微信公众号的文章,因为微信独特一些手段,导致无法直接爬取,研究了一些文章大概有了思路,并且网上目前能搜到的方案思路都没啥问题,但是里面的代码因为一 ...

神州十三号就位，小火箭先去探探路

文章目录

前言

一、CSS制作三角形的原理

二、小火箭的制作

总结

神州十三号就位，小火箭先去探探路相关推荐

最新文章

热门文章