其实用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. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  2. （org.openqa.selenium.WebDriverException: Unable to launch the app: Error: Trying to start logcat capture but it's already started! ）错误解决办法

    新增: capabilities.setCapability("autoLaunch",false); 将setup中的: driver = new AndroidDriver(n ...

  3. solr单机多实例部署文件锁冲突解决的方法

    给出一个有问题的单机多tomcat实例引用同一个solr实例部署图. 这样的部署必定造成一个问题.启动第二个tomcat实例时,一定会报索引目录文件锁已经被占用. 最初的解决的方法是.有多少个tomc ...

  4. iOS 7的手势滑动返回

    如今使用默认模板创建的iOS App都支持手势返回功能,假设导航栏的返回button是自己定义的那么则会失效,也能够參考这里手动设置无效. if ([self.navigationController ...

  5. $.ajax 使用详解

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() ...

  6. 在线安装Ganglia3.6.0，nginx+php搭建gweb，绝对通过

    环境:CentOS6.5 minimal 目标:安装Ganglia核心组件(gmond, gmetad, gmetric, gstat, libganglia).Ganglia web 准备 yum增 ...

  7. IO、FileInputStream、(二十)

    1.IO流概述及其分类 * 1.概念(什么是IO?) * IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流 ...

  8. UVA-10391(字符串检索)

    题意: 给定一个字典,要求找出所有的复合词; 思路: 用map把词都存起来,再把词拆开看是否是出现过的单词; AC代码: #include <bits/stdc++.h> #include ...

  9. linux/unix下 pid文件作用浅析

    l在linux系统的目录/var/run下面一般我们都会看到很多的*.pid文件.而且往往新安装的程序在运行后也会在/var/run目录下面产生自己的pid文件.那么这些pid文件有什么作用呢?它的内 ...

  10. .NETFramework：HttpRuntime

    ylbtech-.NETFramework:HttpRuntime 1.返回顶部 1. #region 程序集 System.Web, Version=4.0.0.0, Culture=neutral ...