.record-left{

content: "";

width: 0;

height: 0;

float: left;

border-top: 10px solid transparent;

border-right: 10px solid red;

border-bottom: 10px solid transparent;

margin-top:5px;

}

.record-right{

content: "";

width: 0;

height: 0;

float: right;

border-top: 10px solid transparent;

border-left: 10px solid red;

border-bottom: 10px solid transparent;

margin-top:5px;

margin-right: 25px;

}

css左右箭头的更多相关文章

  1. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  2. 纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）

    <style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...

  3. css指示箭头两种实现方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS实现箭头效果

    有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我们使用CSSCSS来实现“箭头效果”,使用CSS我们必须兼容所有浏览器(IE6.7.8.9.10.+),Chrome,Firefox,Ope ...

  5. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  6. css写箭头

    /* 向上的箭头 */ .dot-top { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-t ...

  7. css 画箭头

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 用CSS制作箭头的方法

     一.箭头产生的原理 #demo12 { border: 100px solid; border-color:green blue orange red; width:100px; height:10 ...

  9. 纯css实现箭头

    很久之前收集的,忘记出处了. 1.梯形: 当元素宽.高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形: border: 10px solid #000; border-left-color: ...

  10. Css绘制箭头

    IE6不支持transparent,因此上面的代码在IE6加一点处理透明的hack,修改后的代码如下 IE6下处理transparent   border-left:100px solid trans ...

随机推荐

  1. [ecmagnet][django] 如何使用django的signal

    """ 在web开发中, 你可能会遇到下面这种场景: 在用户完成某个操作后, 自动去执行一些后续的操作. 譬如用户完成修改密码后,你要发送一份确认邮件 观察者模式:观察者 ...

  2. BZOJ 3597 SCOI2014 方伯伯送椰子 网络流分析+SPFA

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3597 Description 四川的方伯伯为了致富,决定引进海南的椰子树.方伯伯的椰子园十 ...

  3. 牛客网/LeetCode/七月在线/HelloWorld114

    除了知乎,还有这些网站与offer/内推/秋招/春招相关. 其中HelloWorld114更是囊括许多IT知识. 当然,我们可以拓宽思考的维度,既然课堂上的老师讲不好,我们可以自己找资源啊= => ...

  4. poj3026（bfs+prim）最小生成树

    The Borg is an immensely powerful race of enhanced humanoids from the delta quadrant of the galaxy. ...

  5. pta编程(1-8)

    知识点:本次编程运用到的格式 #include<stdio.h> int main(void) { printf(); return 0; } 过程:1-3.没什么问题,就是注意字符的输入 ...

  6. struts2的验证

    1.原理 当浏览器向服务器提交表单数据时,在服务器端需要对表单数据的有效性进行校验. “校验方法”会在“业务方法”之前调用. 2.实现验证的两种方式 struts2校验的两种实现方法: 1. 手工编写 ...

  7. css引入特殊字体

    http://www.fontsquirrel.com/tools/webfont-generator        ttf格式的字体转换成其他格式的字体   css引入特殊字体建议只是用英文字体,中 ...

  8. [洛谷P3743]kotori的设备

    题目大意:ことり有$n$个设备,每个设备每秒共减少$a_i$能量(也就是说每一瞬间都在减少,而不是在一个时刻突然减少),开始前有$b_i$能量,ことり还有一个充电宝,无限能量,每秒共可以提供$p$的能 ...

  9. Super Moban

    HAO BAN ZI 包括求解,判断无解,求自由变元个数以及标记不确定的变元.来源:http://blog.csdn.net/keshuqi/article/details/51921615 #inc ...

  10. 纯css实现 switch开关

    <!-- 直接看代码,利用了css3兄弟选择器 --><!-- html --> <button class="switch"> <inp ...