用纯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 ...
随机推荐
- PRML读书笔记——2 Probability Distributions
2.1. Binary Variables 1. Bernoulli distribution, p(x = 1|µ) = µ 2.Binomial distribution + 3.beta dis ...
- Chrome浏览器M53更新后超链接的dispatchEvent(evt)方法无法触发文件下载
一个经典的js前台文件下载方法: var aLink = document.createElement('a'); var datatype="data:text/plain;charset ...
- 从零开始学Linux[一]：基本命令:系统信息、目录、文件、文件编辑
摘要:linux基础学习:系统信息.目录.文件查找.文件操作.查看文件内容及大小.软链接.VIM使用. 现在Linux的使用非常普遍.对于一个小白来说,满屏幕的字母,看起来就是一头雾水~ 目前由于 ...
- Oracle常用操作-----（二）
Oracle主要类型函数: 单行函数:只能输入一行结果,返回一个结果.常见的单行函数有: 字符函数 数字函数 转换函数 日期函数 2.聚合函数:同时可以对多行数据进行操作,并返回一个结果.(AVG.S ...
- C++之路进阶——codevs1281（Xn数列）
1281 Xn数列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你6个数,m, a, c, x0, n, ...
- JS实时数据运算
应朋友需要制作的一个小页面 <script type="text/javascript"> function cal(ida,idb,idc,idd) { var nu ...
- iOS开发中NSLog输出格式大全
本文的内容是总结了一下iOS开发中NSLog输出格式大全,虽然比较基础,但有总结毕竟会各位正在学习iOS开发的朋友们一些小小的帮助. %@ 对象 %d, %i ...
- bat命令
将DIR设置为当前文件所在的绝对路径 @echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 echo 当前盘符和路径的短文件名格式:%~sdp0 echo 当前批处理 ...
- dotfiles管理
刚刚知道dotfiles这个东西,百度也没发现什么太有价值的讲解,还都是英文,所以自己立志来好好屡屡清楚 1.dotfiles是什么?我自己的理解:linux下(mac下)有各种app,每个人会根据自 ...
- Python Locust性能测试框架实践
[本文出自天外归云的博客园] Locust的介绍 Locust是一个python的性能测试工具,你可以通过写python脚本的方式来对web接口进行负载测试. Locust的安装 首先你要安装pyth ...