<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. Bootstrap modal被sliverlight掩盖。

    Bootstrap中的modal被silverlight遮挡了,解决方案: <object id='xx'....> ... <param name="windowless ...

  2. Matlab的XTickLabel中数值带下标

    %axis为'x'或'y',分别表示更改x或y刻度 %ticks是字符cell function settick(axis,ticks) n=length(ticks); tkx=get(gca,'X ...

  3. 刨根问底U3D---Vector3 你到底是蔬菜呢还是水果呢？

    事情的起因还是因为一段代码,因为在做一个2D TileBase的游戏 所以需要有一个简单的 Tile坐标到世界坐标的变换 public static Vector3 GetTileWorldPosBy ...

  4. Communication 交流

    1:请不要立马抗拒别人的观点,先沉默下来思考,在做出回应. 2:在与别人交流的时候,请尽量先让别人同意你的观点,找到共同点,让别人回答 "是";

  5. html5，导航

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. C语言回顾-常量和变量

    1.C语言共32个关键字 1)数据类型关键字 a.基本数据类型 void char int float double b.类型修饰关键字 short long signed unsigned c.复杂 ...

  7. 关于OpenGL的性能方面的技巧（不时更新）

    显示列表可以有效提高渲染性能渲染顺序顶点层次分配内存管理递归查找 在有引擎的情况下,同一个模型对象会使用同一份内存和显存 优化裁剪算法,去掉无需渲染的对象 纹理阴影比体阴影效率要高 尽量使用UVW贴图 ...

  8. @weakify, @strongify ObjC的Block中使用weakSelf/strongSelf @weakify/@strongify

    首先要说说什么时候使用weakSelf和strongSelf. 下面引用一篇博客<到底什么时候才需要在ObjC的Block中使用weakSelf/strongSelf>的内容: Objec ...

  9. SVN merge的主干，分支的相互合并操作

    本文只研究了 在本地如何进行主干,分支的相互合并 的操作:从主干到分支,从分支到主干. 本地客户端工具是tortoisesvn 测试用例. 1.本地添加test文件夹 在test文件夹下分别建立tru ...

  10. Linux之一条命令解决常见问题（持续更新）

    # 1.删除0字节文件 find -type f -size 0 -exec rm -f {} \; # 2.批量文件重命名 find . -type f -name "*.txt" ...