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. ubuntu windows mutual remote control

    Win10 remote control Ubuntu18 Part1.ubuntu settings 1.安装所需组件 sudo apt-get update //若没有desktop sharin ...

  2. 从别人那里拿过来的工程，在Idea上打开时报错

    如果是这个错误:也许原因有很多种,但是不妨试一下⑴将给你项目工程的人的.idea文件夹删除,这样在你导入工程时,会生成一个属于你本地的.idea.⑵最好是使用SVN重新把项目工程检出(把项目下载下来, ...

  3. CentOS 7 Cobbler 自动化安装系统

    在上一篇Cobbler 安装中,配置好了Cobbler,下面来配置自动化安装 配置cobbler-DHCP # 修改settings中参数,由cobbler控制dhcp [root@cobbler ~ ...

  4. js递归优化

    递归优化 递归在我们平时撸码中会经常用到,不过可能很多人不知道递归的弊端,就是会导致调用栈越来越深.如果没有节制的使用递归可能会导致调用栈溢出. 那什么是递归呢? 递归调用是一种特殊的嵌套调用,是某个 ...

  5. Sql like模糊查询 区分大小写

    Sql模糊查询,Like默认是不区分大小写的 使用Like时,怎么支持大小写呢? upper.lower,只能模糊所有的内容,不能区分内容中的大小写. sqlite数据库对text字段默认是大小写敏感 ...

  6. nginx部署安装

    首先需要下载Nginx软件包 nginx软件官方下载地址:[nginx官方下载连接](http://www.nginx.org) 建议选择稳定的软件版本,如果练习使用当然是无所谓,随便什么版本都可以, ...

  7. 图库网站Unsplash高清原图爬虫【华为云技术分享】

    [摘要] 写博客的好工具,快速获得高清图片 在百度图片爬虫小助手里,我开发了一个爬虫,来节约我写博客时搜集图片的时间. 但是,也出现了一些问题,主要有以下几点: 百度图片上的质量参差不齐,大部分图片质 ...

  8. pringBoot-MongoDB 索引冲突分析及解决【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  9. DevOps on DevCloud|如何采用流水线践行CI/CD理念【华为云技术分享】

    [摘要] 持续集成/持续交付(CI/CD,Continuous Integration/Continuous Deployment)在DevOps CMALS理念中具有支柱性地位,因而CI/CD流水线 ...

  10. MySQL数据库开发的36条原则

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),验证通过后,输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动&quo ...