其实用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. Python基础——数据类型、流程控制、常用函数

    Python tutorial :Python网站上的对 Python 语言和系统的基本概念和功能进行的非正式的介绍. 在学习Python之前,我们需要学会在各个平台配置Python的运行环境,下文中 ...

  2. 修改flash builder注释里的@author

    在flash builder里,按Ctrl+Shift+D可以很方便在添加AsDoc注释.可是有些生成的@author是系统的用户名(如:administor),怎么修改这个为自己的名字呢? Step ...

  3. JavaScript提高：001：ASP.NET使用easy UI

    jQuery EasyUI是一组基于jQuery的UI插件集合.能够简洁的开发出功能多内容丰富的界面,而不须要开发人员自己费力的写那些复杂的js代码.本文简介在ASP.NET开发中引用这些js文件和样 ...

  4. cocos2d-x(vs2012)环境搭建(第一篇)[版本号:cocos2d-x-3.1.1]

    1.下载资源 下载cocos2d-x包V3.1.1,下载戳这里: http://www.cocos2d-x.org/download vs2012下载戳这里: http://www.xiazaiba. ...

  5. android自己定义开关控件

    近日在android项目要使用开关控件.可是android中自带的开关控件不太惬意,所以就打算通过自己定义View写一个开关控件 ios的开关控件当然就是我要仿照的目标. 先上图:   waterma ...

  6. DRF 之 认证组件

    1.认证的作用? 我们知道,当我们在网站上登陆之后,就会有自己的个人中心,之类的可以对自己的信息进行修改.但是http请求又是无状态的,所以导致我们每次请求都是一个新的请求,服务端每次都需要对请求进行 ...

  7. Mac开发必备工具（三）—— Fish shell

    Fish shell 简介 fish 可以根据输入自动匹配历史命令.它的一大特点是开箱即用,没有zsh那些繁琐的配置.官网:http://www.fishshell.com/. 安装与配置 在终端里使 ...

  8. MYSQL初级学习笔记二：数据表相关操作及MySQL存储引擎！（视频序号：初级_5,7-22|6)

    知识点三:数据表相关操作(5,7-22) --------------------------------整型--------------------------------- --测试整型 CREA ...

  9. jdk8新特性Stream

    Stream的方法描述与实例 1,filter  过滤 Person p1 = new Person(); p1.setName("P1"); p1.setAge(10); Per ...

  10. django错误 - Reason given for failure: CSRF cookie not set.

    练习Django表单提交时遇到如下问题: 在网上各种查找,终于找到了解决方法. 1.在from 表单中添加 {% csrf_token %} 2.在视图中添加 from django.template ...