其实用HTML CSS绘制三角行 是非常简单的 ，我在网上看了不少人写的博客，里面写的好复杂样子，反正我是看的云里雾里的，说实话是挺简单的。

首先提出一段代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width:100px;

            height:100px;

            border-top:20px solid red;

            border-right:20px solid green;

            border-bottom:20px solid blue;

            border-left:20px solid lightgreen;

            margin:100px auto;

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

显示的效果是这样的：

说明一个问题：

一个div盒子如果有width  和  height的 时候

div盒子的每个边是个梯形的形状 ，这个时候可以想象一下，如果把div的宽和高逐渐缩小   缩小到0 代码入下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width:0px;

            height:0px;

            border-top:20px solid red;

            border-right:20px solid green;

            border-bottom:20px solid blue;

            border-left:20px solid lightgreen;

            margin:100px auto;

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

显示的是这样的：

那么我们可以断想一下 ，如果把其他的边变成透明的颜色又会是什么样子的呢？  现在我们把上边   右边   下边的 都变成透明的 就得到了 向右的三角形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width:0px;

            height:0px;

            border-top:20px solid transparent;

            border-right:20px solid transparent;

            border-bottom:20px solid transparent;

            border-left:20px solid lightgreen;

            margin:100px auto;

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

用CSS绘制三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  3. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  4. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  5. CSS绘制三角形和箭头

    <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...

  6. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  7. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  8. 纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. 纯CSS绘制三角形（各种角度）类似于使用字符画法，根据位移不同，也可以使用两个元素画出三角边框

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. wxpython中控件对键盘输入无响应的可能原因

    问题描述: 开发环境:Win7 32bit + Python2.7.6 + WxPython 3.0.1-b20140707 开发某初级CAD软件中,需要实现点击TreeCtrl控件的相应选择,实现G ...

  2. scala快速学习笔记（一）：变量函数，操作符，基本类型

    为了用spark,先学下scala. 参考教程:http://meetfp.com/zh/scala-basic doc查询:http://docs.scala-lang.org 其它资料:http: ...

  3. map数据的分组，list数据排序 数据筛选

    sfit0144 (李四) 2015-01-10 18:00:251Sfit0734 (Sfit0734) 2015-01-10 18:00:38go homesfit0144 (李四) 2015-0 ...

  4. 网站建设中用JS判断时间并显示不同内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 阿里云短信服务发送短信验证码（JAVA开发此功能）

    开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...

  6. codeforces 460B Little Dima and Equation 解题报告

    题目链接:http://codeforces.com/problemset/problem/460/B 题目意思:给出a, b, c三个数,要你找出所有在 1 ≤ x ≤ 1e9 范围内满足 x =  ...

  7. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

  8. [Selenium] 配置 Internet Explorer Driver 的注意事项

    1)请确保 IEDriverServer 的可执行文件在系统环境变量PATH 中 2)在IE7 和以上版本的 Internet Explorer 上,必须确保保护模式的正确配置.设置方式为 Tools ...

  9. 【NOIP 2003】 加分二叉树

    [题目链接] 点击打开链接 [算法] 树形DP即可 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 50 in ...

  10. noip数学

    一.取模运算 (1)定义 给定一个正整数p和一个整数n 一定存在此等式 n=k*p+r;其中k,r是整数,r大于等于0小于p 称k是n除以p的商,r为n除以p的余数 说明:同余式 正整数a,b对p取模 ...