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. html5权威指南：标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  2. POJ 3041 Asteroids（匈牙利+邻接表）

    (￣▽￣)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  3. C#获取数字证书

    string Thumbprint = "C2489D912F247C187AA14B1291A6fB612281225D"; X509Store store = new X509 ...

  4. Nginx简单配置，部分来源于网络

    nginx.conf listener监听端口 server_name监听域名 location{}是用来为匹配的 URI 进行配置,URI 即语法中的“/uri/”.location  / { }匹 ...

  5. OC 截取字符串

    1.定义一个字符串a, 截取a 的某一个部分,复制给b, b必须是int型 NSString *a = @"1.2.30"; int  b= [[a substringWithRa ...

  6. CentOS 6下的VPN搭建

    PPTP 全称为 Point to Point Tunneling Protocol — 点到点隧道协议,是VPN协议中的一种.虚拟专用网(VPN)被定义为通过一个公用网络(通常是因特网)建立一个临时 ...

  7. Telnet服务器和域名系统的端口号 Mac OS X

    找到Telnet服务器和域名系统的端口号: lapommedeMacBook-Pro:~ lapomme$ grep telnet /etc/services telnet /udp # Telnet ...

  8. (转载)Git使用教程

    转载自:http://www.418log.org/post-89.html .什么是Git 简单地说,Git是 Linux 之父 Linus Trovalds,为管理 Linux 内核代码而建立的, ...

  9. python常用函数年初大总结

    1.常用内置函数:(不用import就可以直接使用) help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像函数一样调用 repr(obj) 得到o ...

  10. nmon的安装与使用

    nmon的安装与使用 1.下载 nmon:http://nmon.sourceforge.net/pmwiki.php?n=Site.Download nmonanalyser http://www. ...