1、利用Css 的border绘制三角形的原理：

div的border是有宽度和颜色的，当div的宽度比较大的时候，比如上面代码每个边100像素，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：

1、只有相邻边才会相交，对边是不可能相交的

2、相交区域(显然是矩形)按对角线划分成两个三角形，两个三角形分别渲染成两个边的颜色，颜色不会出现重叠的情况

3、调整四个边的宽度，加上中间区域的宽度，配以不同颜色和透明，各种简单多边形(举一反三)已经不在话下了

<html>
<style>
    *{margin:0px; padding: 0px;}
    .tran{
        position: relative;
        left:10px;
        top:10px;
        width: 50px;
        height: 50px;
        border-bottom: 10px solid red;
        border-left: 10px solid green;
        border-top: 10px solid red;
        border-right: 10px solid green;
    }
</style>
<div class="tran"></div>
</html>

　　效果图：

三角形：

<html>

<style>

    *{margin:0px; padding: 0px;}

    .tran{

        position: relative;

        left:10px;

        top:10px;

        width:0;

        height:0;

        /*border-bottom: 100px solid red;*/

        border-left: 100px solid transparent;

        border-top: 100px solid red; /*要形成上面的三角形，需要设置上面这条边有颜色，左边和右边透明*/

        border-right: 100px solid transparent;

    }

</style>

<div class="tran"></div>

</html>

　　效果图

利用css的border实现画三角形思路原理的更多相关文章

  1. css趣味案例：画三角形

    代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  2. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  3. 如果用css的border属性画一个三角形

    假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...

  4. Sass mixin 使用css border属性画三角形

    To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...

  5. CSS相关，手画三角形，正方形，扇形

    三角形 实现一个三角形 <!DOCTYPE html> <html> <head> <title>三角形</title> <style ...

  6. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  7. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  8. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  9. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

随机推荐

  1. 2016年团体程序设计天梯赛-决赛 L1-6. 一帮一（15）

    “一帮一学习小组”是中小学中常见的学习组织方式,老师把学习成绩靠前的学生跟学习成绩靠后的学生排在一组.本题就请你编写程序帮助老师自动完成这个分配工作,即在得到全班学生的排名后,在当前尚未分组的学生中, ...

  2. PAT 乙级 1004. 成绩排名

    读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 学号 成绩 第3行:第2个学生 ...

  3. C# 编辑距离实现

    /// <summary> /// 计算 /// </summary> /// <param name="str1"></param> ...

  4. Html加载swf 兼容IE8 （含以下）显示

    嵌入参数说明: 1,AllowScriptAccess  参数: sameDomain:仅当 SWF 文件和网页位于同一域中时才允许执行外出脚本访问.这是 AVM2 内容的默认值----播放网络视频, ...

  5. 神经网络工具箱nntool的使用方法

    关于如何使用nntool神经网络工具箱进行“数据训练”的方法: 1. 在命令窗口键入nntool命令打开神经网络工具箱: 2. 点击Import按钮两次,分别把输入向量和目标输出加入到对应的窗口([I ...

  6. js 中null 和 undifined

    1.一个重要问题 null == undifined (true) ; null === undefined (false) 为什么是这样的呢? undifined是未赋值的基本数据类型,未定义: n ...

  7. Windows命令查看文件MD5码

    D:\>certutil -hashfile md5test.txt MD5 MD5 哈希(文件 md5test.txt): d6 f6 bb 38 b5 6b 67 8f 34 9b e4 d ...

  8. svn地址如何更改

    1.先进入平时放的更新文件的位置 2.然后右键 选中TortoiseSVN中的Relocate修改里面的完了之后输入账号和密码就好了当然你要记得密码和账号

  9. HDU 4289 Control

    最小割 一个点拆成两个 AddEdge(i,i+N,x); 原图中的每条边这样连 AddEdge(u+N,v,INF); AddEdge(v+N,u,INF); S是源点,t+N是汇点.最大流就是答案 ...

  10. Linux下利用nc命令来监控检测服务器的端口使用情况（转载）

    最近碰到一个项目,前端用apache htttpd进行发布(80端口),通过双机负载均衡转发到后端的两个tomcat进行处理(8081和8082端口),现在需要随时监控这三个端口的情况,一旦down掉 ...