三角形div其实就是从边框的演变过程

#sider2{

width: 100px;

height: 100px;

border-top: 30px solid #000;

border-right: 30px solid #ff0000;

border-left: 30px solid #00ff00;

border-bottom: 30px solid #0000ff;

}

会得到如下的一张图:

2、接着当不设置border-bottom,即默认其为0时,可以得到下面的图片;

3、然后当设置其width为0时,如下图:

4、继续设置其height为0;

5、最后假若你把border-left,border-right设置为透明之后,就可以看到如下的三角形了。

6、这就是设置一个基本的三角形所需要的代码,效果也看起来很直观。

7、还有假如是想实现一个直角三角形,则最后需要两个border边的配合使用,浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形

#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

三角形div原理(小知识点)的更多相关文章

  1. 三角形div的原理

    三角形div原理 首先我们写一个正常的方形div样式,但是我们把它的宽度和高度都设置为零,并且边框线设置的粗一点: { width:0px: height:0px; Border:20px solid ...

  2. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  3. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  4. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  5. jQuery 小知识点(插件)

    1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...

  6. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  7. 深入了解webpack前,可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  8. 数学小知识点整理(TBC)

    文章目录 前言 素数与同余 线性筛部分 素数 线性递推逆元 指数循环节降幂 当求逆元时模数与求逆元的数有可能不互质时的处理方法 一个神奇的结论 拓展欧拉定理 杂乱的一些性质/技巧 二进制枚举子集 异或 ...

  9. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

随机推荐

  1. 提取url中参数的方法(转换成json格式)

    还是直接上代码吧. //将url中的参数获取到并抓换成json格式 function serilizeUrl(url){ var urlObject={}; //1.正则匹配是不是以?结尾 if(/\ ...

  2. MockPlus的使用方法简介

    不废话直接上图,不明白的留言.

  3. JavaScript简易动画

    <p id="s">fly</p> <script> function move(){ var id=document.getElementBy ...

  4. js匿名函数使用&传参

    function () { alert("error"); } //报错:匿名函数不能直接调用 使用 0x01 (function () { alert("Success ...

  5. Weka:call for the EM algorithm to achieve clustering.(EM算法)

    EM算法: 在Eclipse中写出读取文件的代码然后调用EM算法计算输出结果: package EMAlg; import java.io.*; import weka.core.*; import ...

  6. win环境下jdk7与jdk8共存问题

    1.jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe.javaw.exe.javaws.exe三个文件cop ...

  7. Android—PopupWindow的简单使用

    PopupWindow 是一个可以显示在当前 Activity 之上的浮动容器,这个Demo要实现的功能是,点击布局中的两个按钮,进而控制PopupWindow的显示与消失,代码中有详细的注释首先看一 ...

  8. solidity语言5

    结构体 pragma solidity ^0.4.11; // 众筹合约 contract CrowdFunding { // 投资者 struct Funder { address addr; ui ...

  9. HTTP协议安全头部X-Content-Type-Options引入的问题

    前段时间测试MM反馈了一个问题,在富文本编辑器里上传的图片无法正常呈现.因为Jackie在本机的环境上没有观察类似的现象,而恰好那天测试环境的某个重要配项被改错了,于是Jackie想当然的归类为配置项 ...

  10. 解决Image在canvas以及audio、video在AudioContext下跨域问题

    媒体元素嘛,在对应的标签或对象上加上 crossOrigin = 'anonymous' 即可. 例如 Image 在canvas 上绘制时会跨域: <img crossOrigin=" ...