其实用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. 我为什么不喜欢 CoreData

    我为什么不喜欢 CoreData   我一直不喜欢 Core Data,以前不太敢明目张胆地这么表达,现在收集到越来越多相关的信息,所以给大家分享一下,我为什么不喜欢 Core Data. Core ...

  2. 图像处理之图像格式变换和色彩增强---rgb2hsi2hsv 色彩增强

    从昨天折腾到今天.再折腾下去我都要上主楼了  大致和灰度图均衡是一样的,主要是不能像平滑什么的直接对R,G,B三个分量进行.这样出来的图像时没法看的.因此我们要对亮度进行均衡.而HSI彩色空间中的分量 ...

  3. 给EasyUi的Form加入自己主动填充部分输入框的方法

    依据项目须要,基于获取的数据对Form的部分输入框进行填充,而默认的EasyUI的Form 没有该方法.仅仅能一个输入框一个输入框的直接赋值,为此添加了Form对象的setValues,实现依据给定的 ...

  4. 创建Vue项目的步骤

    第一步: 对于要创建项目的工作目录,要先进性管理,命令:npm init -y 第二步: 初始化webpack 包,命令:vue init webpack 自定义名称 第三步: 在components ...

  5. com.mongodb. org.mongodb.

  6. 中国vs美国制造业公司营业额大排名，看看哪些属于美国制造业的优势产业（中美旗鼓相当，而且还有本土制造的优势）

    当然,所谓的美国制造业,大量的东西现在 在中国制造和生产,但这里列举的,主要是卖实体工业产品为主的美国公司这个榜单里主要列出以工业产品销售为主的公司. 所以各大能源巨头虽然本身也是装备制造大户,但没被 ...

  7. C# 自定义控件及引用自动义控件

    1.http://www.cnblogs.com/hjxzjp/p/7823292.html   优先考虑从现有的控件中进行派生,并添加所需要的功能. 在解决方案资源管理器窗口中设置:引用----&g ...

  8. 安装mysql 8.0版本时，使用front连接报1251错误或者navicat 连接报错2059解决方案

    这个错误出现的原因是在mysql8之前的版本中加密规则为mysql_native_password,而在mysql8以后的加密规则为caching_sha2_password. 解决此问题有两种方法, ...

  9. 基于MATLAB的滤波算法

    目前比较经典的图像去噪算法主要有以下三种: 均值滤波:也称线性滤波,主要思想为邻域平均法,即用几个像素灰度  的平均值来代替每个像素的灰度.有效抑制加性噪声,但容易引起图像模糊,  可以对其进行改进, ...

  10. HDU2476 String painter —— 区间DP

    题目链接:https://vjudge.net/problem/HDU-2476 String painter Time Limit: 5000/2000 MS (Java/Others)    Me ...