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. JAVA中数组Arrays类的常见用法

    import java.util.Arrays; int[] array1={7,8,3,2,12,6,5,4}; 1.  //克隆clone  int[] array2=array1.clone() ...

  2. 【数据结构】之栈（C语言描述）

    栈(Stack)是编程中最常用的数据结构之一. 栈的特点是“后进先出”,就像堆积木一样,堆的时候要一块一块堆到最上面,拆的时候需要从最上面一块一块往下拆.栈的原理也一样,只不过它的操作不叫堆和拆,而是 ...

  3. 【Android - 控件】之MD - TabLayout的使用

    TabLayout是Android 5.0新特性——Material Design中的一个控件,是一个标签页的导航条,常结合ViewPager完成页面导航. 和其他MD控件一样,使用TabLayout ...

  4. 测试访问apiserver状态

    目录 前言 创建admin证书和私钥 分发kubeconfig文件 检查集群信息 授权kube-apiserver访问kubelet API的权限 前言 到这里,ETCD集群.kube-nginx + ...

  5. mysql 安装报错集合

    mysql-5.6.39 源码编译安装报错 报错信息: /tmp/ccV858jD.s: Assembler messages: /tmp/ccV858jD.s: Fatal error: can't ...

  6. Django-settings可插拔实现

    Setting可插拔 django暴露了一个可以给用户自定义配置的文件,优先使用用户配置的信息,而且必须要大写才有效 文件目录 --about_settings --default --conf -- ...

  7. idea 使用下Java JDK安装

    下载idea 百度云: 链接:https://pan.baidu.com/s/1pmDTH-W1_BhSYJAlcAvljQ          提取码:sgmk 下载Java1.8(jdk-8u181 ...

  8. [UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

    1. UWP中的其它裁剪方案 之前在 这篇文章 里,我介绍了如何使用UIElement.Clip裁剪UIElement的内容,使用代码如下: <Canvas> <Image Sour ...

  9. 深度学习DeepLearning核心技术理论与实践

    深度学习DeepLearning核心技术开发与应用时间地点:2019年11月01日-04日(北京) 联系人杨老师  电话(同微信)17777853361

  10. 马拉车manacher

    目的:线性查找一个串的最长回文子串 时间复杂度:O(n) len[i]表示以i为中心的回文串的半径,mx即为当前计算回文串最右边字符的最大值,p是中心点mid,mx-i和2*p-1关于p对称 http ...