用纯css画个三角形以下是源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>用纯css画个三角形-柯乐义</title>

</head>

<body>

<style type="text/css">

.rightdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color:transparent transparent transparent #A9DBF6;

}

.bottomdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: #A9DBF6 transparent transparent transparent;

}

.leftdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent #A9DBF6 transparent transparent;

}

.topdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent transparent #A9DBF6 transparent;

}

</style>

<div class="rightdirection"></div>

<p>

<div class="bottomdirection"></div>

<p>

<div class="leftdirection"></div>

<p>

<div class="topdirection"></div>

</body>

</html>

参考：http://keleyi.com/a/bjac/j9nnxrqd.htm

 

用纯css画个三角形的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  6. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  7. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  8. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  9. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

随机推荐

  1. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  2. 像素图的实时光照 Lighting on Pixel Art

    去年有这样一个工具,We got one toolkit last year. 他有什么功能呢?What is its function? 让你画出各个方向的照明图 That you can draw ...

  3. 使用Guava提供的transform批量转换

    实际开发了,为了快速查询,我们会把日期以Long类型的方式存储到数据库中,比如20000000000000L,但显示的时候,要完整的日期,即yyyy-MM-dd的格式显示. 这个时候,我们就可以使用C ...

  4. ASP.NET MVC 随想录—— 使用ASP.NET Identity实现基于声明的授权，高级篇

    在这篇文章中,我将继续ASP.NET Identity 之旅,这也是ASP.NET Identity 三部曲的最后一篇.在本文中,将为大家介绍ASP.NET Identity 的高级功能,它支持声明式 ...

  5. 汇编 int10h（转）

    原文:http://www.cnblogs.com/magic-cube/archive/2011/10/19/2217676.html INT 10H 是由 BIOS 对屏幕及显示器所提供的服务程序 ...

  6. linux service

    有些东西真是难得搞懂,一旦懂了就容易记住了. 说到service 就不能不说 daemon, 他们两者看起来不相关.其实是紧密相连的两个概念. —— 就像两个同心的正五边形和正六边形放在一起时候的样子 ...

  7. Java基础之常用类

    1.Collections类: (1)此类完全由在 collection 上进行操作或返回 collection 的静态方法组成. (2)静态方法摘要: static <T> boolea ...

  8. Atitit  代理与分销系统(1)  子代理 充值总额功能设计概览 sum() groubpy subagt

    Atitit  代理与分销系统(1)  子代理 充值总额功能设计概览 sum() groubpy subagt Keyword 分组与聚合操作. 一个for做分组...里面的做聚合... 数据g操作查 ...

  9. DOM_03之元素及常用对象

    1.修改样式:访问内联样式:elem.style.css属性名:获得其他:var style=getComputerStyle(elem):*(* 获得焦点onfocus:失去焦点onblur:): ...

  10. 类的继承和多态性-编写Java应用程序，定义Animal类，此类中有动物的属性：名称 name,腿的数量legs，统计动物的数量 count;方法：设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount()。定义Fish类，是Animal类的子类，

    编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 ...