css写出三角形

 

利用css写三角形,兼容IE7

.arrow-up {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid red;
font-size:0px;
line-height:0px;
margin: 0 auto;
} .arrow-down {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid blue;
font-size:0px;
line-height:0px;
} .arrow-left {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right:10px solid #DC143C;
font-size:0px;
line-height:0px;
}
.arrow-right {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-left:10px solid #FF00FF;
font-size:0px;
line-height:0px;
}

css写出三角形(兼容IE)的更多相关文章

  1. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

  2. 利用css3特性写出三角形(兼容IE浏览器)

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  3. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  6. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  7. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  8. 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?

    前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...

  9. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

随机推荐

  1. cheatsheet——mac 上的一款可以显示软件所有快捷键的小工具

    https://www.mediaatelier.com/CheatSheet/ 发现一款可以显示 mac 上各种软件所有快捷键的小工具:cheatsheet,只要长按 command 键就可以了~ ...

  2. 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划

    菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 采用Sc ...

  3. C++ Primer 5 CH4 表达式

    4.1 基础 函数调用也是一种特殊的运算符,它对运算对象的数量没有限制. C++ 的表达式要么是左值,要么是右值.左值可以位于赋值语句的左边,右值则不可以. 当一个对象被用作右值的时候,用的是对象的值 ...

  4. 丑数(USACO)

    这个题是一个动态规划加优化的经典题 1246 丑数 USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解 题目描述 Description 对 ...

  5. iOS开发之UINavigationController

    1.概述: 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用. 2.UINavigationController ...

  6. 服务器证书安装配置指南(SLB)

    一.生成证书请求  1.下载CSR生成工具 您需要使用CSR生成工具来创建证书请求.  下载AutoCSR: http://www.itrus.cn/soft/autocsr.rar  2.生成服务器 ...

  7. 老李分享:大数据测试中java和hadoop关系

    Hadoop的创始人是Doug Cutting, 同时也是著名的基于Java的检索引擎库Apache Lucene的创始人.Hadoop本来是用于著名的开源搜索引擎Apache Nutch,而Nutc ...

  8. Xmpp实现简单聊天系列 --- ②用户注册和登陆

    不管是注册还是登陆,亦或是聊天等功能,都必须先进行服务器连接,连接代码如下 ①自定义Xmpp连接工具类:     ②调用创建连接的方法:     ③连接服务器方法:       *注意 连接方式为客服 ...

  9. number问题

    Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one ...

  10. MAT(Memory Analyzer Tool)使用心得

    起因:最近在跟踪产品的性能问题,期间主要问题体现在JVM的内存回收问题,使用MAT工具进行JVM内存分析(也可对android 的应用内存分析) 问题描述: 1.部分后端服务在运行一段时间后会突然年老 ...