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. （转）了解JNDI

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  2. php基础（三）超全局变量

    超全局变量 在 PHP 4.1.0 中引入,是在全部作用域中始终可用的内置变量. PHP 全局变量 - 超全局变量 PHP 中的许多预定义变量都是“超全局的”,这意味着它们在一个脚本的全部作用域中都可 ...

  3. Struts入门学习(三)---自定义类型转换器

    类型转换器是将浏览器传递的参数进行转换为了与服务器端的参数匹配,先举个例子如果我们想往服务器传递日期类型的参数时我们要怎么让浏览器传过去的让服务器明白 我们新建一个类 ConverterTest.ja ...

  4. luci页面“save&apply”的实现分析

    页面上配置的“保存&应用”功能的实现: 最终调用到/etc/config/ucitrack的配置文件. 例如配置无线时,对应ucitrack配置文件中的config network    op ...

  5. 关于php的socket

    这里仅记录tcp协议: 关于server: <?php /** * 测试关于php的socket函数 */ /** * 最基本的socket,服务器端: * 创建 * $sock = socke ...

  6. vultr vps官网改版免费注册教程（最新优惠码）

    本站强烈推荐的,国外超高性价比vps服务器Vultr官方网站最近更新了,导致一些朋友心生茫然,今天写个简易教程给大家. 首先是打开vultr官网,免费注册一个vultr账号.填写邮箱地址.密码,非常简 ...

  7. chapter 13_4 跟踪table的访问

    __index和__newindex都是在table中没有所需访问的index时才发挥作用. 因此,只有将一个table保持为空,才有可能捕捉到所有对它的访问.为了监视一个table的所有访问,就应该 ...

  8. NOIP2014-普及组复赛-第一题-珠心算测验

    题目描述 Description 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师 ...

  9. js自定义的简易滚动条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. html5 --基础笔记2

    1.autocomplete 可以给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能 <form id="" method="" au ...