<style>

//向上三角形

.triangle_up{

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid red;

}

//向下三角形

.triangle_up{

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-top:30px solid red;

}

//向左三角形

.triangle_up{

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid red;

}

//向右三角形

.triangle_up{

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-left:30px solid red;

}

</style>

<body>

<div class="triangle_up"></div>

<div class="triangle_down"></div>

<div class="triangle_left"></div>

<div class="triangle_right"></div>

</body>

综上所述：你所要的三角形朝向是跟代码所写是对立的。比如：朝上的三角形，你就得用border-bottom；朝左，你就得用border-right;如此。。。

用纯Css作三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

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

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  4. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  5. 纯css画三角形

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

  6. 【面试题】纯css实现三角形，你知道如何实现吗？

    纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...

  7. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

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

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

  9. 纯css实现三角形

    在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形   向右的三角形   向下的三角形   向左的三角形   实现它们的css分别是: .top ...

随机推荐

  1. 关于Thread.getContextClassLoader的使用场景问题

    Thread context class loader存在的目的主要是为了解决parent delegation机制下无法干净的解决的问题.假如有下述委派链: ClassLoader A -> ...

  2. sqlserver安装出现问题

    今天用友财务软件免费下载网站小编给 一个客户安装畅捷通T +11.51软件时,首先参照了SQL 2008 R2数据库安装教程安装SQL 2008 R2数据库时碰到一个奇怪的问题现象就是:安 装 SQL ...

  3. MC, MCMC, Gibbs采样 原理&实现（in R）

    本文用讲一下指定分布的随机抽样方法:MC(Monte Carlo), MC(Markov Chain), MCMC(Markov Chain Monte Carlo)的基本原理,并用R语言实现了几个例 ...

  4. 总结asp.net页面跳转

    ASP.NET页面跳转相关知识 一.<a>标签   1. <a href=”test.aspx”></a>   2. 这是最常见的一种转向方法; eg:  < ...

  5. 更快的方式实现PHP数组去重

    数组去重的几种快捷方式: 1.//创建一个包含重复值的,一共四个元素的数组   $array = array('green','blue','orange','blue');  // 翻转数组,你将会 ...

  6. MVC 4 异步编程简化了

    MVC 3 异步编程好麻烦,需要使用异步控制器,一个Action需要拆成两个,很不方便.MVC3的好处是,只需要.NET Framework 4.0就能运行 MVC 4 之后只需要使用async和aw ...

  7. 关于input内容监听（change）

    js的话利用input的onchange事件 而jquery的话利用change()函数,代码如下: <!DOCTYPE html> <html> <head> & ...

  8. 《Vuser虚拟用户开发》读书笔记

    学会了Vuser开发只是算了性能测试入了门.要做好性能测试还需要了解系统的功能,架构和设计测试用例. 脚本选用什么协议的依据是需要模拟的客户端与服务器之间的通信采用什么协议.与具体的开发技术并无直接的 ...

  9. 转 java中的session

    书中讲:以下情况,Session结束生命周期,Servlet容器将Session所占资源释放:1.客户端关闭浏览器2.Session过期3.服务器端调用了HttpSession的invalidate( ...

  10. linux上使用amoeba实现MySql集群，以及读写分离，主从复制

    一.由于是MySql集群,所以就不可能只有一个MySql,需要多个MySql,具体安装步骤,可以参考http://www.cnblogs.com/ywzq/p/4882140.html这个地址进行安装 ...