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 ...
随机推荐
- day 36
目录 pymysql操作mysql 安装 连接 增 删 改 查 索引 为什么使用索引以及索引的作用 类比 索引的本质 索引的底层原理 索引的种类(重点) 主键索引 唯一索引 普通索引 索引的创建 主键 ...
- 10. [mmc subsystem] host(第四章)——host实例(sdhci-msm说明)
一.说明 sdhci-msm是指高通的mmc host,其使用了标准SDHC标准.故可以使用前面说的<host(第二章)--sdhci>和<host(第三章)--sdhci-pltf ...
- CornerNet: Detecting Objects as Paired Keypoints
CornerNet是一种anchor free的目标检测方法,不需要设置anchor,而是通过检测关键点(Keypoints),即目标的左上角(Top-Left Corners)和右下角(Bottom ...
- C语言的10大基础算法
C语言的10大基础算法 算法是一个程序和软件的灵魂,作为一名优秀的程序员,只有对一些基础的算法有着全面的掌握,才会在设计程序和编写代码的过程中显得得心应手.本文包括了经典的Fibonacci数列.简易 ...
- AssetBundleMaster_ReadMe_EN
Before we start use it, you'd better import it to an empty project, following the ReadMe to learn th ...
- 学习9:MongoDB知识
MongoDB学习笔记 1 基本介绍 基本概念 MongoDB**是一种面向文档的数据库管理系统,由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.2007年10月,MongoDB由10g ...
- ASIO库使用注意事项
1. 使用 io_service::work 实现 io_service 无任务时不退出 正常情况下向io_service抛任务,它执行完成后就会自动退出,而要实现那种chromium那种的循环队列, ...
- php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
php.mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳) //其中 video 是表名: //createtime 是字段: // //数据库time字段为时间戳 // //查询当天: ...
- 201871020225-牟星源《面向对象程序设计(java)》第十一周学习总结
201871020225-牟星源<面向对象程序设计(java)>第十一周学习总结 博文正文开头: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu ...
- 接口八问 & 接口测试质量评估标准
接口八问 关于接口的具体信息,可以通过以下八个问题进行了解: 接口的请求地址? 接口的作用? 接口的请求方式? 接口是否是用户相关? 接口是否存在上送数据,上送数据是什么? 接口返回的报文头和编码? ...