HTML实现三角形和旗帜代码
1.三角形
1.1html+css
<style>
*{
margin: 0px;
padding: 0px;
}
span{
display: block;
margin-left: 25%;
width: 0px;
height: 0px;
border: 200px solid transparent;
border-bottom-color:red;
}
</style>
<span></span>
1.2实现图

2.旗帜
2.1html+css
<style>
.div1{
width: 500px;
height: 600px;
/* padding: 20px 0px 0px 50px; */
/* border: 1px solid red; */
/* text-align: center; */
margin-left: 25%;
margin-top: 10%;
}
.div01{
display: inline-block;
background-color: black;
width: 10px;
height: 600px;
float: left;
}
.div02{
display: inline-block;
width: 0px;
height: 0px;
border-left:300px solid red;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid transparent;
float: left;
}
</style> <div class="div1">
<div class="div01"></div>
<div class="div02"></div>
</div>
2.2实现图
HTML实现三角形和旗帜代码的更多相关文章
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- 使用HTML CSS制作简易三角形和旗帜
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 飘扬的旗帜!shader 编程实战!Cocos Creator!
用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 实现原理 ...
- 利用CSS3中transparent实现三角形及三角形组合图
??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- CSS3实现三角形
很多时候我们用到三角形这个效果: 我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的 ...
- CSS3中三角形及三角形组合图实现
几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...
- 用CSS来画空心三角形的方法
画这里三角形的方法: 用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:befo ...
- 分形之拆分三角形(Split Triangle)
前面讲了谢尔宾斯基三角形,它是不停地将一个三角形拆分三个与之相似的三角形.这一节给大家展示的图形是将一个等腰钝角三角形不停地拆分两个与之相似的三角形. 核心代码: static void SplitT ...
随机推荐
- WampServer 下载以及安装问题 以及配置远程连接MYSQL
WampServer 3.0 下载: http://dl.pconline.com.cn/download/52877-1.html 碰到的问题DDL无法添加,解决方法:MSVCR110.DLL fo ...
- 在SuSE安装wifidog认证服务器和网关
在SuSE安装认证服务器和网关 在openSuSE 10.3安装wifidog 认证服务器和网关在同台设备中安装完毕.以下是openSuSE的详细安装指南.这个安装是非常初级的,所以请验证或更正. - ...
- R语言与概率统计(二) 假设检验
> ####################5.2 > X<-c(159, 280, 101, 212, 224, 379, 179, 264, + 222, 362, 168, 2 ...
- React Native初始化项目0.47.1报错
首先看一下安卓和iOS报错: iOS终端运行报错: Xcode运行报错: 解决办法一: 将版本降到0.44.3,修改package,具体请看我的另一篇博客: http://www.cnblogs.co ...
- weblogic12.1.3部署应用程序
weblogic12.1.3部署应用程序请参照:https://www.cnblogs.com/xdp-gacl/p/4143413.html
- three.js 之 透明物体不能正常显示
这几天遇到一个需求,类似这个案例:http://www.hightopo.com/demo/FaultDetection/ 就是这个透明渐变呼吸光柱,看到之后就想着写个shader材质实现透明度渐变, ...
- js 笔记整理
Js中for.for-in.forEach以及for-of的用法及特性对比 for-in for...in以任意顺序遍历一个对象的可枚举属性.所以for-in不适合用来迭代一个Array.同时,for ...
- Vue开发工具
vue微信小程序:mpvue 极客开发工具:Dcloud,uni-app 一套代码多终端. 简书-推荐的Vue UI库 Vue UI: 功能介绍帖子之一 :帖子二 VSCode: 介绍帖子 Vue- ...
- Linux核心系统命令
关机,重启: shutdown -h now:关机 shutdown -r now:重启 文件和目录操作命令: pwd:显示当前所在路径 cd:切换目录 cd - :切换到上一次所在路径 cd ~:切 ...
- C学习笔记-小程序(长期更新)
产生随机数 int t = (int)time(NULL); srand(t); int num = rand() % 10; 利用keybd_event函数自动打印,mouse_event函数保存文 ...