<!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. 通过jstl判断是否给value 赋值

    <input type="text" name="saler.password" id="password"  value=" ...

  2. python（3）- 循环语句：从最内层跳出多层循环

    跳出多层循环:三层循环,最里层直接跳出3层 方法一: 在Python中,函数运行到return这一句就会停止,因此可以利用这一特性,将功能写成函数,终止多重循环 def work(): #定义函数 f ...

  3. LNMPA遇到504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定. 当我以为安装完成以后 ...

  4. 《后会无期》票房赶超《小时代3》 大数据解读韩寒VS四娘之争

    7月25日.韩寒导演的处女作<后会无期>零点首映,而郭四娘导演的<小时代3:刺金时代>比<后会无期>早上映一周.也就是7月17日正式公映,韩寒与四娘之间向来不缺乏话 ...

  5. PHP中curl获取本机虚拟主机接口

    在PHP的curl代码中增加header可解决此问题. $header = array( "Host: 你的域名(不能包含http://)", "Accept: text ...

  6. 宜人贷蜂巢ELK Stack之elasticsearch权限探索

    前言 上文<宜人贷蜂巢API网关技术解密之Netty使用实践>提到了,API网关“承外对内”,将外部请求,转发到内部各个抓取服务.在网关中,不仅可以做鉴权.加解密.路由.限流功能:如果想了 ...

  7. GCJ Qualification Round 2016 D题

    这题就是找规律.小数据还是挺容易想的.大数据得再深入分析一下. 题意挺绕的. 其实就是字符串转换.字符串只能有两种字母,L或G.给定K和C,就能通过规则生成目标字符串. 那么,如果知道了K和C,以及目 ...

  8. Comparison method violates its general contract! 异常原因

    项目运行期间出现Comparison method violates its general contract!异常,网上查阅了一下,原因还是比较明确的: Collections.sort(list, ...

  9. 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3引发的血案

    1.下载了一个开源项目,是用netcore开发的 2.VS2015打不开解决方案 3.于是安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3 4.安装成功,项目顺利 ...

  10. Aspose.cells 读取Excel表中的图片问题

    一.说明 本文主要是讲解,怎么使用aspose.cells读取Excel表中的图片,并把图片转换成流或是image对象. 二.开发环境说明 开发工具vs2012,c#语言, 三.Aspose.cell ...