css画三角形原理解析
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
#div1 {
width:;
height:;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom:80px solid red
}
ps : transparent为设置透明
为了探究css画三角形的原理,先来实验一下,试试单边
#div1 {
width:;
height:;
border-top: 40px solid ;
}
#div2 {
width:;
height:;
border-right: 40px solid ;
}
#div3 {
width:;
height:;
border-bottom: 40px solid ;
}
#div4 {
width:;
height:;
border-left: 40px solid ;
}
发现没有显示,再来试试两条边
#div1 {
width:;
height:;
border-top: 40px solid ;
border-right: 40px solid red;
}
#div2 {
width:;
height:;
border-top: 40px solid ;
border-bottom: 40px solid red;
}
#div3 {
width:;
height:;
border-top: 40px solid ;
border-left: 40px solid red;
}
#div4 {
width:;
height:;
border-right: 40px solid ;
border-bottom: 40px solid red;
}
#div5 {
width:;
height:;
border-right: 40px solid ;
border-left: 40px solid red;
}
#div6 {
width:;
height:;
border-bottom: 40px solid ;
border-left: 40px solid red;
}
发现只有相邻边才会显示,相对边不显示,然后试试三边/四边发现都能显示
为什么设置宽高为0时就会呈三角形?如果设置宽高呢?
#div1 {
width: 20px;
height:20px;
border-top: 40px solid ;
border-right: 40px solid red;
border-bottom: 40px solid green;
border-left: 40px solid yellow;
}
为了更清晰的地对比,再来看一看
#div1 {
width: 20px;
height:20px;
border-top: 40px solid ;
border-right: 40px solid red;
border-bottom: 40px solid green;
border-left: 40px solid yellow;
}
#div2 {
width:;
height:;
border-top: 40px solid ;
border-right: 40px solid red;
border-bottom: 40px solid green;
border-left: 40px solid yellow;
}
#div3 {
width:;
height:;
border-top: 40px solid ;
border-left: 40px solid red;
border-bottom: 40px solid green;
}
#div4 {
width:;
height:;
border-top: 40px solid ;
border-left: 40px solid red;
}
从下往上解读:
1、当宽高为0时,只有两条边,即可以看作朝指定方向缩进、对应宽高的矩形(div4,左上缩进,宽(border-left)40px,,高(border-top)40px),
2、当宽高为0时,只有三条边,即可看做全部组合的、朝指定方向缩进、对应宽高的矩形
( div3,[左上缩进,宽(border-left)40px,,高(border-top)40px],[左下缩进,宽(border-left)40px,,高(border-bottom)40px],[上下缩进,对应边不显示] ),靠左拼接
3、当宽高为0时,有四条边,即可看做全部组合的、朝指定方向缩进、对应宽高的矩形
( div2,{ [左上缩进,不再重复......],[右上缩进,......] 靠上拼接},{ [右上缩进,......],[右下缩进,......] 靠右拼接},{ [右下缩进,......],[左下缩进,......] 靠下拼接},{ [左下缩进,不再重复......],[左上缩进,......] 靠左拼接} )
4、当宽高不为0时,根据盒子模型,border在外围,会被元素撑开
css画三角形原理解析的更多相关文章
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- HTML 和 CSS 画三角形和画多边行基本原理及实践
基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- 如何用CSS画三角形
很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 用css画三角形
当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...
随机推荐
- windows自动化测试环境搭建文档
步骤如下: 1.搭建安卓环境,需要设置系统变量“ANDROID_HOME”. 2.安装Node.js http://www.nodejs.org/download/ 下载相关操作系统的版本 3.安装A ...
- 201871010132--张潇潇--《面向对象程序设计(java)》第十二周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- selenium 2定位方式实例
#########百度输入框的定位方式########## #通过id方式定位 browser.find_element_by_id("kw").send_keys("s ...
- zzXDL
Pull requestsIssues Marketplace Explore Learn Git and GitHub without any code! Using ...
- JDOJ 1789: 高精度A+B
JDOJ 1789: 高精度A+B JDOJ传送门 洛谷 P1601 A+B Problem(高精) 洛谷传送门 Description 已知两个整数A.B 求A+B Input 第一行为A 第二行为 ...
- Spring Cloud微服务安全实战_3-6_API安全机制之审计
审计日志 定义:谁,在什么时间,干了什么事. 位置:认证之后,授权之前. 这样就知道是谁在访问,拒绝掉的访问也能被记录.如果放在认证之前,那么就不知道是谁在访问:如果放在授权之后,就没办法记录被拒绝的 ...
- 公共组件及脚手架webpack模板
一.公共组件的创建和使用 前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件.这里是讲解全局组件如何在脚手架项目中去使用. 1.创建全局组件 在src/components/C ...
- B1043 输出PATest (20 分)
一.技术总结: 对于哈希字符处理方式,一般是用一个数组存储字符出现的次数,然后再考虑后续. 同时,在输出时,比如这题要输出指定几个字符,我们可以首先统计下这几个字符一共出现的次数sum,然后输出一个就 ...
- Linux设置定时任务方法
linux下定时执行任务的方法: 在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LI ...
- 《TP5.0学习笔记---模板变量输出、替换和赋值篇》
原文地址:http://blog.csdn.net/self_realian/article/details/75214922 模板变量输出.替换和赋值 我们看一下文件编译的结果,我们知道我们现在写的 ...