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--画布

    简介 canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形.图标.以及其它任何视觉性图像.它也可用于创建图片特效和动画.canvas 元素本身是没有绘图能力的.所有的绘制工 ...

  2. 生成扫描二维码下载app的二维码的方法

    进入APP store苹果应用程序商店,根据分类找到你要生成二维码的APP,然后在浏览器连接里找到ID后的一串数字就是APP的应用ID了. 安卓系统的appid 在电脑浏览器中打开应用宝官网,http ...

  3. EasyuiAPI：菜单

    一.LinkButton(按钮) 1.通过标签创建: <a id="btn" href="#" class="easyui-linkbutton ...

  4. WiMAX协议栈

    1.协议栈模型 协议栈模型将 WiMAX 系统分为数据控制平面和管理平面两个平面 数据控制平面对数据的正确传输进行保证,包括封装.分片.加密.解封装等 基站与用户站之间的特定信令交互完成系统的控制功能 ...

  5. LeetCode OJ 41. First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  6. linux 非root用户 ssh 免密码登录

    之所以要把这个记录下来 是因为它的确和root用户不一样root用户 不需要改动什么权限问题  只要生成私钥/公钥对 即可 但是一样的操作在普通用户上就出了问题了 折腾了老半天 ssh-keygen ...

  7. NYOJ-1036 非洲小孩（贪心）

    非洲小孩 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 家住非洲的小孩,都很黑.为什么呢?第一,他们地处热带,太阳辐射严重.第二,他们不经常洗澡.(常年缺水,怎么洗 ...

  8. Mybatis批量更新数据

    转载:http://blog.csdn.net/tolcf/article/details/39213217 第一种方式 <update id="updateBatch" p ...

  9. 利用xcopy命令实现本地文件复制到远程服务器的方法

    net use \\192.168.1.198\ipc$ Zqf198703 /user:royalpeak xcopy g:\backup\*.* \\192.168.1.198\数据备份 /D / ...

  10. JSP 之国际化

    导入 <%@ taglib url="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 创建三个语 ...