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. 用setTimeout实现与setInteval类似的功能

    用setTimeout实现与setInteval类似的功能,代码如下: (function(){ var self = arguments.callee; //获取函数本身 count++; if ( ...

  2. Spring Security（05）——异常信息本地化

    Spring Security支持将展现给终端用户看的异常信息本地化,这些信息包括认证失败.访问被拒绝等.而对于展现给开发者看的异常信息和日志信息(如配置错误)则是不能够进行本地化的,它们是以英文硬编 ...

  3. Qml 定义 constant

    对于程序中一些常量如字符串, 实数等, C++中经常用的方法, 是定义全局常量: 或者把所有意义相近的常量用一个单例类收集起来. QML是类JSON的标识性语言, 使用js 语法去操作对象. 在QML ...

  4. openwrt增加串口登录需要密码

    https://wiki.openwrt.org/doc/howto/serial.console.password Openwrt 串口默认是没有密码的.Openwrt启动后,一个默认的密码将被启用 ...

  5. 一步一步学EF系列【4、升级篇 实体与数据库的映射】live writer真坑，第4次补发

    前言 之前的几篇文章,被推荐到首页后,又被博客园下了,原因内容太少,那我要写多点呢,还是就按照这种频率进行写呢?本身我的意图这个系列就是想已最简单最容易理解的方式进行,每篇内容也不要太多,这样初学者容 ...

  6. php 备份数据库

    <?php    header("Content-type:text/html;charset=utf-8");    //配置信息  $cfg_dbhost = 'loca ...

  7. ValueStack背后的OGNL表达式

    原文地址:http://blog.csdn.net/li_tengfei/archive/2010/12/25/6098134.aspx 前言: Strut2的Action类通过属性可以获得所有相关的 ...

  8. do-while循环判断成绩的有效输入

    #include "stdio.h" void main() { int score; do { printf("请输入你的成绩(0-100):"); scan ...

  9. 基于Centos6.6的R720服务器四网口端口聚合的实践

    服务器多网口端口聚合,其目的主要在于网卡容灾和提升带宽.linux端口绑定,提供7种模式,如下: 关于mode共有0-6等7种模式,详细请参考官方手册!mode的值表示工作模式,他共有0,1,2,3, ...

  10. JDK下载和安装

    1.下载并安装JDK ,最新版本为1.8.0,官网下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 点击所 ...