空心箭头:示例图片

<b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
.post_list .spread .bottom{
width:20px;
height:20px;
position:absolute;
left:24px;
top: .06rem;
z-index:;/*兼容ie8-*/
}
.post_list .spread .bottom-arrow1,.bottom-arrow2{
width:;
height:;
display:block;
position:absolute;
left:;
top:;
z-index:;/*兼容ie8-*/
border-bottom:.13rem transparent dashed;
border-left:.13rem transparent dashed;
border-right:.13rem transparent dashed;
border-top:.13rem white solid;
overflow:hidden;
}
.post_list .spread .bottom-arrow1{
top:1px;/*重要*/
border-top:.13rem blue solid;
}
.post_list .spread .bottom-arrow2{
border-top:.13rem white solid;
}

实心向下箭头:示例图片

<div class="test"></div>
.test{
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-left: 6px;
margin-right: -14px;
width:;
height:;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #ccc;
}

制作以上这种,从中间向两边渐变的border

div{border-bottom: 1px solid #ddd;border-image: -webkit-radial-gradient(#BFBFBF,#fff) 30 30;}

自定义对勾,input的单选多选

.label:after {content:"";position:absolute;left:2px;top:2px;width:9px;height:4px;border:2px solid #fff;border-top-color:transparent;border-right-color:transparent;transform:rotate(-45deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);}

css制作小标志的更多相关文章

  1. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  2. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  3. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  4. HTML+CSS 制作HTML5标志图

    效果图如下:(是用代码写的,而不是图片!) 网上看到的代码. 看了下,就是CSS的transform属性的应用.加上定位等.组合在一起形成图片. 没什么难点,就是width,left等数据得根据HTM ...

  5. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  6. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  7. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  8. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  9. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

随机推荐

  1. delphi Ctrl+鼠标左键或者Find Declaration不能定位到源文件

    在Delphi代码编辑器中使用Ctrl+鼠标左键可跳转到鼠标下的类所在的定义处,但今天发现一个奇怪的问题,EhLib组件的类无法跳转(包括uses中的pas文件),重新安装也是如此,后来经过验证,发现 ...

  2. python中的__dict__,__getattr__,__setattr__

    python class 通过内置成员dict 存储成员信息(字典) 首先用一个简单的例子看一下dict 的用法 class A(): def __init__(self,a,b): self.a = ...

  3. CentOS7防火墙问题

    CentOS6关闭防火墙使用以下命令, //临时关闭service iptables stop//禁止开机启动chkconfig iptables off CentOS7中若使用同样的命令会报错, s ...

  4. Linux-I/O重定向和管道

    Linux I/O重定向 标准输入(stdin):文件描述符0 标准输入(stdout):文件描述符1 标准错误(stderr):文件描述符2 file descriptors(FD,文件描述符 或 ...

  5. 微信公众、QQ群、知识星球(附比特币链接)

    文章一般都会在公众号抢先预览,一个系列出差不多的时候一般博客园汇总一下(文章很长) 微信公众号:逸鹏说道(dotnetcrazy) 群友刚创建的Python中级群,有一定Python基础的可以共同探讨 ...

  6. 纠错式教学法对比鼓励式教学法 -----Lily、贝乐、英孚,乐加乐、剑桥国际、优学汇、北外青少

    一.关于两种英语教学法的争议 在英语教学方面,主要有纠错式教学法(目前主要对应国内听说读写四位一体的教学法)和鼓励式教学法(目前对应国内听说为主的教学法),这两种教学方法其实是各有千秋,各有利弊的. ...

  7. (三) 查看USB设备

    目录 查看USB设备 lsusb ll /sys/bus/usb/devices cat /sys/kernel/debug/usb/devices dmesg title: 查看USB设备 date ...

  8. 贝叶斯推断 && 概率编程初探

    1. 写在之前的话 0x1:贝叶斯推断的思想 我们从一个例子开始我们本文的讨论.小明是一个编程老手,但是依然坚信bug仍有可能在代码中存在.于是,在实现了一段特别难的算法之后,他开始决定先来一个简单的 ...

  9. Linux学习之管道符、重定向、通配符、转义符、环境变量

    Linux学习之管道符.重定向.通配符.转义符.环境变量 1. 输入输出重定向 输入重定向是指把文件导入命令中. 输出重定向是指把原本要输出到屏幕的数据信息写入指定文件中. a 标准输入重定向(STD ...

  10. python基础1之 由来、种类、优缺点、安装环境

    python基础1之由来.种类.优缺点.安装环境 一.前世今生 Python的创始人是吉多·范罗苏姆(Guido van Rossum),在1989年开发.今年最新的编程语言排行榜中,python名列 ...