<!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. Oracle hidden costs revealed, Part2 – Using DTrace to find why writes in SYSTEM tablespace are slower than in others

    http://blog.tanelpoder.com/2008/09/02/oracle-hidden-costs-revealed-part2-using-dtrace-to-find-why-wr ...

  2. MVC项目引用备注

    新建空的WEB应用 MVC Nuget引用:Microsoft.AspNet.MvcMicrosoft.AspNet.Web.Optimization 可选删除 Microsoft.CodeDom.P ...

  3. 介绍一个开源的SIP(VOIP)协议库PJSIP

    本文系转载,出处不可考. 假设你对SIP/VoIP技术感兴趣,哪希望你不要错过:),假设你对写出堪称优美的Code感兴趣 ,那么你也不可错过:) 这期间我想分析一下一个实际的协议栈的设计到实现的相关技 ...

  4. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  5. CentOS7配置opencv for python && eclipse c/c++[更新]

    更改前的安装过程有些问题,主要是ffmpeg-devel的安装部分,这里重新说一下 两种安装方法: 第一种,直接: # yum install numpy opencv* 这种方法安装了之后,能够在p ...

  6. 成长为 iOS 大 V 的秘密

    成长为 iOS 大 V 的秘密   前言 毫不谦虚地说,我是国内 iOS 开发的大 V.我从 2011 年底开始自学 iOS 开发,经过 3 年时间,到 2014 年底,我不但写作了上百篇 iOS 相 ...

  7. Appium python自动化测试系列之Capability介绍（五）

    ​5.1 Capability介绍 5.1.1 什么是Capability 在讲capability之前大家是否还记得在讲log时给大家看过的启动时的日志?在我们的整个启动日志中会出现一些配置信息,其 ...

  8. JQuery日记 5.31 JQuery对象的生成

    JQuery对象的生成 1 selector为不论什么可转换false的空值   返回空JQuery对象 2 selector为字符串   2.1 selector为html字符串或有id属性的标签 ...

  9. 录音-树莓派USB摄像头话筒

    实测可用: sudo arecord --duration=10 --device=plughw:1,0 --format=cd aaa.wav sudo arecord --duration=10 ...

  10. linux host=${host:-"localhost"}使用方法

    localhost=${host:-"localhost"} host 变量未设定或者为空,host取"-"后面的值;否则host=$host host=${h ...