css3 实现右箭头→

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.divtest{
position: absolute;
top: 100px;
left: 100px;
height: 3px;
width: 10px;
padding-left: 30px;
background: red;
line-height: 40px;
}
.divtest:before{
content: '';
position: absolute;
top: -3px;
right: -1px;
width: 7px;
height: 7px;
border-top: 2px solid red;
border-right: 2px solid red;
transform: rotate(45deg);
} </style>
<body>
<div class="divtest">
<!-- 这是一个箭头 -->
</div>
</body>
</html>

css3 伪类实现右箭头→的更多相关文章

  1. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  2. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  3. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  4. 利用CSS3伪类做3D按钮

    这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...

  5. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  6. jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  7. CSS3伪类实现动画旋转效果

    一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang= ...

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

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

  9. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

随机推荐

  1. logistic回归介绍以及原理分析

    1.什么是logistic回归? logistic回归虽然说是回归,但确是为了解决分类问题,是二分类任务的首选方法,简单来说,输出结果不是0就是1 举个简单的例子: 癌症检测:这种算法输入病理图片并且 ...

  2. C# Properties文件夹 Bin 目录 Bin 目录

    Properties文件夹 定义你程序集的属性 项目属性文件夹 一般只有一个 AssemblyInfo.cs 类文件,用于保存程序集的信息,如名称,版本等,这些信息一般与项目属性面板中的数据对应,不需 ...

  3. 查看/设置JVM使用的垃圾收集器

    一.设置垃圾收集器的参数 -XX:+UseSerialGC,虚拟机在Client模式下的默认值,Serial+Serial Old -XX:+UseParNewGC,ParNew+Serial Old ...

  4. Date、Calendar和GregorianCalendar的使用

    java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 第一个构造函数使用当前日期和时间来初始化对象. Date public st ...

  5. Too many open files的四种解决办法

    [摘要] Too many open files有四种可能:一 单个进程打开文件句柄数过多,二 操作系统打开的文件句柄数过多,三 systemd对该进程进行了限制,四 inotify达到上限. 领导见 ...

  6. springcloud+kafka集群

    上节说了kafka在linux环境下怎么搭建集群.这节写一下怎么在springcloud中以stream流方式去做kafka集群对接. 1.yml配置 #spring Cloud kafka -- s ...

  7. mac 命令记录

    1. 安装 mysqlworkbench brew search mysql brew tap caskroom/cask brew cask search mysql brew cask insta ...

  8. HotStuff共识协议详解

    1. 前言 HotStuff提出了一个三阶段投票的BFT类共识协议,该协议实现了safety.liveness.responsiveness特性.通过在投票过程中引入门限签名实现了O(n)的消息验证复 ...

  9. Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31

    作者 | 徐迪.李传云.黄珂.汪萌海.张晓宇.何淋波 .陈有坤.李鹏审核 | 陈俊 上游重要进展 1. Kubernetes v1.17 版本发布 功能稳定性是第一要务.v1.17 包含 22 个增强 ...

  10. python笔记02

    day02笔记记录 一.今日摘要 循环.字符串格式化.运算符.编码.博客. 二.内容回顾 (一)计算机基础 计算机由硬件和软件组成.传统计算机的硬件一般有输入单元.输出单元,算数逻辑单元.控制单元及记 ...