<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. docker的8个使用场景

    1.简化配置 虚拟机的最大好处是能在你的硬件设施上运行各种配置不一样的平台(软件, 系统), Docker在降低额外开销的情况下提供了同样的功能. 它能让你将运行环境和配置放在代码汇总然后部署, 同一 ...

  2. MySQL Execution Plan--COUNT相关测试

    COUNT全表记录 在MySQL中,相同的SQL不同的存储引擎执行计划不同: 对于MyISAM引擎,由于使用表锁进行并发控制,同一时间点多个并发线程执行相同查询获得的结果相同,且MyISAM存储引擎专 ...

  3. 其他综合-CentOS 7 命令行显示优化

    CentOS 7 命令行显示优化 1.实验描述 通过 CentOS 7.6 的显示优化,为实现命令行显示提供良好视觉体验. [基于此文章的环境]点我快速打开文章 2.实验环境 使用软件的版本:VMwa ...

  4. Android TextField : set focus + soft input programmatically

    Good sir, try this: edittext.setFocusableInTouchMode(true); edittext.requestFocus(); Im not sure, bu ...

  5. 01-numpy-笔记-empty

    import numpy as np >>> a = np.empty([2,3]) >>> a array([[0.00000000e+000, 4.935933 ...

  6. 【Spring Data JPA篇】项目环境搭建(一)

    项目环境: spring4.1.6 hibernate4.3.11 spring-data-jpa1.9.0 1. 创建一个Java Project,将jar导入到lib目录下 #spring spr ...

  7. LeetCode 113. Path Sum II路径总和 II (C++)

    题目: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the give ...

  8. 基于Intel OpenVINO的搭建及应用,包含分类,目标检测,及分割,超分辨

    PART I: 搭建环境OPENVINO+Tensorflow1.12.0 I: l_openvino_toolkit_p_2019.1.094 第一步常规安装参考链接:https://docs.op ...

  9. github新建本地仓库并将代码提交到远程仓库

    方式一: 在github上新建好仓库:gitTest 使用命令git clone git@github.com:yourgithubID/gitTest.git,克隆到本地相应的位置 将要上传的工程代 ...

  10. ASP.NET Core 新建项目(Windows)

    对于任何语言和框架,都是从 Hello World 开始的,这个非常简单,但却有十分重大的意义,ASP.NET Core 基础教程也会以 Hello World 开始 为什么呢? 因为能够运行 Hel ...