<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. when will a databasechange be committed?

    1) Database-updates via DML in a SQLExec-statement (e.g. INSERT INTO PS_TEST_TABLE VALUES(‘value_fie ...

  2. 从出租车司机到大BOSS的转型之路

    来深圳之前,曾有人这样告诉我:在深圳千万不能以貌取人,打扮不起眼,也许他转身开的座驾就是宝马.奔驰;不管一个人多么邋遢俗气,也别瞧不起人家,也许他的手提袋里就是成捆的人民币现金;不管一个人打扮的多么土 ...

  3. eclipse远程debug

    由于一般比较正规项目,都会有好几个版本,有时候在测试版本的时候,一切都好好的,然后提交到其他版本之后会有各种各样的问题,这个时候如果不能快速准确的定位到问题,那么我们就需要用 eclipse远程deb ...

  4. iOS9适配 之 关于info.plist 第三方登录 添加URL Schemes白名单

    近期苹果公司iOS 9系统策略更新,限制了http协议的访问,此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单,才可正常检查其他应用是否安装. 受此影响,当你的应用在 ...

  5. [已解决] windows 下 git 免输密码

    在 .git/config 里面加上这句话即 [credential] helper = store 原文地址:http://www.cnblogs.com/gifisan/p/5829578.htm ...

  6. 再次熟悉jdbc连接mysql

    闲来无事想探究一下jdbc 1.首先准备工作.我们要下载jdbc驱动包mysql-connector-java-5.1.7-bin.jar.其他的暂时先不用,这个包的下载地址:http://pan.b ...

  7. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  8. 字典的循环和if语句

    字典是键-值(key-value)存储,循环的时候也是以键为对象 d = {'Michael': 95, 'Tracy': 85,'Bob': 75} for x in d : print x 输出结 ...

  9. javascript 字符转换为ascii码，ascii码转换为字符

    <script> str="A"; code = str.charCodeAt(); str2 = String.fromCharCode(code); str3 = ...

  10. sql函数PadLeft与PadRight代码实例

    1.PadLeft函数向已知字符串左边补充字符,使整个字符串到达指定长度 CREATE FUNCTION PadLeft ( ),/*原始字符*/ @TotalLength int,/*总长度*/ ) ...