<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #triangle-up {

                width: 0;

                height: 0;

                border-left: 50px solid red;

                border-right: 50px solid yellow;

                border-bottom: 50px solid greenyellow;

                border-top: 50px solid #0F9AE0;     /*加 transparent 属性可以使相应的边框隐藏*/

            }

        </style>

    </head>

    <body>

        <div id="triangle-up"></div>

    </body>

</html>

效果图如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUkAAADfCAIAAAD0oLYVAAAFeElEQVR4nO3WwY0cNxRF0cnAW9lJKBM7FdkJaCnYysA5KBUtR1tnMt4ZhjTTXVVNFl+/Pgc/AALkBf/TC9DoafUBgCm0DZ20DZ20DZ20DZ20DZ20DZ2+b/vTr7//9Pc/5ur8+fXDkguDjX74t5+e5H11Pn/9YOUh3Ctty3tb2Nom2utty3tD2Nom2ptty/ta2Nom2qW25X0xbG0T7Urb8n47bG0T7Xrb8n4jbG0TbVPbj5z322Frm2hb237MvC+GrW2i7Wj70fK+Fra2ibav7cfJe0PY2iba7rYfIe9tYWubaEfa7s57c9jaJtrBtlvz3hO2tol2vO2+vHeGrW2i3dR2U977w9Y20W5tuyPvQ2Frm2gD2r73vI+GrW2ijWn7fvO+IWxtE21Y2/eY921ha5toI9u+r7xvDlvbRBvc9r3kPSJsbRNtfNv5eQ8KW9tEm9J2ct7jwtY20Wa1nZn30LC1TbSJbaflPTpsbRNtbts5eU8IW9tEm952Qt5zwtY20c5oe23e08LWNtFOantV3jPD1jbRzmv7/Lwnh61top3a9pl5zw9b20Q7u+1z8j4lbG0TbUHbs/M+K2xtE21N2/PyPjFsbRNtWdsz8j43bG0TbWXbY/M+PWxtE21x26PyXhG2tom2vu3b814UtraJFtH2LXmvC1vbREtp+1jeS8PWNtGC2t6b9+qwtU20rLa35x0QtraJFtf2lrwzwtY20RLbvpx3TNjaJlpo22/lnRS2tomW2/aPeYeFrW2iRbf9/7zzwtY20dLbfnl6+vTbH38lhq1tot1B298+vnt++Xl1xtrmzqS3/e3juy8v77+8vH9++WV1ydrmnkS3/V/YqXlDrty2vws7Mm/IFdr2q2Hn5Q25Etu+EHZY3pArru2rYSflDbmy2t4YdkzekCuo7V1hZ+QNuVLaPhB2QN6QK6Ltw2GvzhtyrW/7xrCX5g25Frc9JOx1eUOulW0PDHtR3pBrWdvDw16RN+Ra0/aksE/PG3ItaHtq2OfmDbnObvuEsE/MG3Kd2vZpYZ+VN+Q6r+2Twz4lb8h1UttLwp6fN+Q6o+2FYU/OG3JNb3t52DPzhlxz2w4Je1rekGti21Fhz8kbcs1qOzDsCXlDriltx4Y9Om/INb7t8LCH5g25Brd9F2GPyxtyjWz7jsIelDfkGtb23YU9Im/INabtOw375rwh14C27zrs2/KGXLe2XRD2DXlDrpvargn7aN6Q63jbZWEfyhtyHWy7Muz9eUOuI20Xh70zb8i1u+36sPfkDbn2tf0gYW/OG3LtaPuhwt6WN+Ta2vYDhr0hb8i1qe2HDfta3pDretsPHvbFvCHXlbaFfTFvyHWpbWFfyxtyvdm2sDfkDbleb/tZ2JvyhlyvtC3szXlDru8fqFV8T96Qy+cDnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnbQNnf4Fed8q0KqSeY0AAAAASUVORK5CYII=" alt="" />

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绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

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

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

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

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

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

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

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

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

随机推荐

  1. Swift：闭包(Closures)

    一. 基本概念 闭包(Closures)是自包括的功能代码块,能够在代码中使用或者用来作为參数传值. 在Swift中的闭包与C.OC中的blocks和其他编程语言(如C#)中的lambda, java ...

  2. linux 中两个文档怎么对比内容是否一致

    可以用diff命令对比文档内容.[语法]: diff [参数] 文件1 文件2[说明]: 本命令比较两个文本文件,将不同的行列出来-b 将一串空格或TAB 转换成一个空格或TAB-e 生成一个编辑角本 ...

  3. intent 支持的action 动作

    String ACTION_AIRPLANE_MODE_CHANGED Broadcast Action: The user has switched the phone into or out of ...

  4. SpringMVC同时支持多视图(JSP,Velocity,Freemarker等)的一种思路实现

    在基于SpringMVC的项目中有时需要同时使用多种视图格式,如jsp,velocity及freemarker等,通过不同的请求路径配置规则,映射到不同的视图文件.下面我提供一种思路,通过视图模板文件 ...

  5. C# Http方式下载文件到本地

    下文代码是从网络(http://www.cnblogs.com/hayden/archive/2012/04/26/2472815.html)得来,亲测好用.我中修改了下格式和注释,版权属于原作者“舒 ...

  6. javascript 判断字符串是否包换字符串

    用"ghiahgiahgia".indexOf("hg"); 返回值>=0为包含,否则就是-1(不包含)

  7. vue2.0 + vux （四）Home页

    1.综合页(首页) Home.vue <!-- 首页 --> <template> <div> <!-- 顶部 标题栏 --> <app-head ...

  8. Solaris 下解决上网问题以及远程登录问题

    解决乱码问题 参考文章 http://www.jb51.net/os/Solaris/1656.html solaris 显示乱码的解决方法 现象: 利用命令 : LANG=zh; export LA ...

  9. jquery的一点点认识

    概述 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 .它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, O ...

  10. iperf3 测试路由器吞吐率

    mini newifi 电脑端: iperf3 -s 路由器: root@OpenWrt:/# iperf3 -c 10.10.10.3 -t 20 Connecting to host 10.10. ...