用纯Css作三角形
<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作三角形的更多相关文章
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- CSS学习笔记（8）--纯CSS绘制三角形（各种角度）
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 【面试题】纯css实现三角形，你知道如何实现吗？
纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 纯CSS绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形 向右的三角形 向下的三角形 向左的三角形 实现它们的css分别是: .top ...
随机推荐
- Hadoop+Spark:集群环境搭建
环境准备: 在虚拟机下,大家三台Linux ubuntu 14.04 server x64 系统(下载地址:http://releases.ubuntu.com/14.04.2/ubuntu-14.0 ...
- js 给样式添加随机颜色
下面提供了三种获取随机颜色值的方法 方法一: 创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色. function color1(){ var color = "&q ...
- SQL数据库操作命令大全
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- [python]WindowsError的错误代码详解
转自:http://www.aichengxu.com/view/46906 WindowsError的错误代码详解 0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. ...
- 人工智能系统Google开源的TensorFlow官方文档中文版
人工智能系统Google开源的TensorFlow官方文档中文版 2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,机器学习作为人工智能的一种类型,可以让软件根据大量的 ...
- Mac下面的SecureCRT(附破解方案) 更新到最新的8.0.2
继续更新到8.0.2的破解,整体的破解方案都发生了的变化首先还是去 http://macabc.com/detail.htm?app_id=24 下载最新的8.0.2介于很多小白说替换之后说文件损坏, ...
- 31、springmvc（注解）
回顾什么是springmvc,它与spring有什么关系 springmvc属于spring框架的后续产品,用在基于MVC的表现层开发,类似于struts2框架 参见<<springmvc ...
- Linux C Programing - Terminal(1)
#include <stdio.h> //getchar() putchar() printf() gets() puts() sprintf() #include <stdlib. ...
- Java调用脚本
几个参考: java调用shell http://www.cnblogs.com/Seamanm/archive/2010/10/04/1842059.html java程序中调用linux命令 ...
- 是否支持css3
/** * Function to check css3 support * @param {String} declaration name * @return {Boolean} */ funct ...