<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. 《zw版·delphi与Halcon系列原创教程》THOperatorSetX版hello,zw

    <zw版·delphi与Halcon系列原创教程>THOperatorSetX版hello,zw 下面介绍v3版的hello,zw. Halcon两大核心控件,THImagex.THOpe ...

  2. shell 显示字体颜色

    (2).颜色语法:     \033[前景色;背景色m     \033[0m                   #0m代表恢复到系统默认的颜色   (3).字符界面前景颜色与背景颜色:     前 ...

  3. Mac下安装LNMP(Nginx+PHP5.6)环境

    [转自:http://avnpc.com/pages/install-lnmp-on-osx] 安装Homebrew 最近工作环境切换到Mac,所以以OS X Yosemite(10.10.1)为例, ...

  4. Prince2和PMP的区别，大多数人都没有搞清楚！

    [涨姿势]Prince2和PMP的区别,大多数人都没搞清楚!   项目管理领域有2个流行的知识体系:☑ 一个是美国项目管理协会(PMI)开发的"项目管理知识体系(PMBOK,Project ...

  5. LA 4287 等价性证明

    题目链接:http://vjudge.net/contest/141990#overview 题意是告诉你有n个命题,m条递推关系,表示某个命题可以推出另外一个命题. 现在问你至少在增加多少个递推关系 ...

  6. linux mysql导入导出

    linux下导入.导出mysql数据库命令 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 ...

  7. Xcode环境下OpenGL C++ GLFW开发环境搭建

    操作系统版本:MacOS Mavericks 10.9.2 Xcode版本:5.0.1 OpenGL版本:4.10 GLFW版本:3.0.4 一.GLFW编译 1.下载并安装cmake(当前最新版本为 ...

  8. 【宽度优先搜索】神奇的状态压缩 CodeVs1004四子连棋

    一.写在前面 其实这是一道大水题,而且还出在了数据最水的OJ上,所以实际上这题并没有什么难度.博主写这篇blog主要是想写下一个想法--状态压缩.状态压缩在记录.修改状态以及判重去重等方面有着极高的( ...

  9. ZIP等

    file命令可以查看文件的类型 tar类型 .targzip类型 .gz bzip2类型 .bz2zip类型 .zip 如果一个压缩文件由tar命令解压的前提,2个条件1.这个文件必须是由tar打包之 ...

  10. CSS3的chapter5

    变形样式——transform: translate()                              ——指定对象的2D translation(2d平移) transform-orig ...