<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画三角形原理解析的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  3. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  4. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  5. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  6. CSS3画三角形原理

    1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...

  7. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  8. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  9. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

随机推荐

  1. windows自动化测试环境搭建文档

    步骤如下: 1.搭建安卓环境,需要设置系统变量“ANDROID_HOME”. 2.安装Node.js http://www.nodejs.org/download/ 下载相关操作系统的版本 3.安装A ...

  2. 201871010132--张潇潇--《面向对象程序设计(java)》第十二周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  3. selenium 2定位方式实例

    #########百度输入框的定位方式########## #通过id方式定位 browser.find_element_by_id("kw").send_keys("s ...

  4. zzXDL

        Pull requestsIssues Marketplace Explore             Learn Git and GitHub without any code! Using ...

  5. JDOJ 1789: 高精度A+B

    JDOJ 1789: 高精度A+B JDOJ传送门 洛谷 P1601 A+B Problem(高精) 洛谷传送门 Description 已知两个整数A.B 求A+B Input 第一行为A 第二行为 ...

  6. Spring Cloud微服务安全实战_3-6_API安全机制之审计

    审计日志 定义:谁,在什么时间,干了什么事. 位置:认证之后,授权之前. 这样就知道是谁在访问,拒绝掉的访问也能被记录.如果放在认证之前,那么就不知道是谁在访问:如果放在授权之后,就没办法记录被拒绝的 ...

  7. 公共组件及脚手架webpack模板

    一.公共组件的创建和使用 前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件.这里是讲解全局组件如何在脚手架项目中去使用. 1.创建全局组件 在src/components/C ...

  8. B1043 输出PATest (20 分)

    一.技术总结: 对于哈希字符处理方式,一般是用一个数组存储字符出现的次数,然后再考虑后续. 同时,在输出时,比如这题要输出指定几个字符,我们可以首先统计下这几个字符一共出现的次数sum,然后输出一个就 ...

  9. Linux设置定时任务方法

    linux下定时执行任务的方法: 在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出.   在LI ...

  10. 《TP5.0学习笔记---模板变量输出、替换和赋值篇》

    原文地址:http://blog.csdn.net/self_realian/article/details/75214922 模板变量输出.替换和赋值 我们看一下文件编译的结果,我们知道我们现在写的 ...