精华内容
下载资源
问答
  • css 箭头

    2018-04-13 18:26:59
    用纯css实现箭头效果的代码关键是设:width 和 height 为 0箭头效果<style> .arrow { display: inline-block; width: 0px; height: 0px; border: 30px solid transparent; overflow: hidden; }/*向上...

    用纯css实现箭头效果的代码关键是设:width 和 height 为 0

    箭头效果

    <style> 
    .arrow { display: inline-block; width: 0px; height: 0px; border: 30px solid transparent; overflow: hidden; }
    /*向上箭头,只有三个边,不能指定上边框*/
    .arrow-up { border-top: none; border-bottom-color: red; }
    /*向下箭头 ,只有三个边,不能指定下边框*/
    .arrow-down { border-bottom: none; border-top-color: orange; }
    /*向左的箭头:只有三个边,不能指定左边框,向左三角形的高=上+下边框的长度。宽=右边框的长度*/
    .arrow-left { border-left: none; border-right: 40px solid blue; }
    /*向右的箭头:只有三个边,不能指定右边框。向右三角形的高=上+下边框的长度。宽=左边框的长度*/
    .arrow-right { border-right: none; border-left: 40px solid green; }
    </style>

    <span class="arrow arrow-up"></span>
    <span class="arrow arrow-down"></span>
    <span class="arrow arrow-left"></span>
    <span class="arrow arrow-right"></span>

     

     线性箭头效果:两个箭头重叠展示,第二个箭头小于第一个箭头,用颜色覆盖来展示线性箭头

    <style>
    .arrow-line { display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-top-color: #000; /* position: relative; */ }
    .arrow-b { float: left; border-width: 8px; border-top-color: #fff; margin-top: -10px; margin-left: -8px; /* position: absolute; top: 0; left: 0; */ }
    </style>
    <span class="arrow-line">
    <span class="arrow-line arrow-b"></span>
    </span>

     

    展开全文
  • css箭头动画代码:.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}//添加infinite类,动画多次执行.animated.infinite {-webkit...

    css箭头动画代码:

    .animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    }

    //添加infinite类,动画多次执行

    .animated.infinite {

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    }

    //右箭头

    @keyframes bounceRight {

    0%,

    100% {

    -webkit-transform: translateX(0);

    transform: translateX(0);

    }

    50% {

    -webkit-transform: translateX(3px);

    transform: translateX(3px);

    }

    80% {

    -webkit-transform: translateX(6px);

    transform: translateX(6px);

    }

    }

    .bounceRight {

    -webkit-animation-name: bounceRight;

    animation-name: bounceRight;

    }

    //左箭头

    @keyframes bounceLeft {

    0%,

    100% {

    -webkit-transform: translateX(0);

    transform: translateX(0);

    }

    50% {

    -webkit-transform: translateX(6px);

    transform: translateX(6px);

    }

    80% {

    -webkit-transform: translateX(3px);

    transform: translateX(3px);

    }

    }

    .bounceLeft {

    -webkit-animation-name: bounceLeft;

    animation-name: bounceLeft;

    }

    //下箭头

    @keyframes bounceDown {

    0%,

    100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    }

    50% {

    -webkit-transform: translateY(6px);

    transform: translateY(6px);

    }

    80% {

    -webkit-transform: translateY(3px);

    transform: translateY(3px);

    }

    }

    .bounceDown {

    -webkit-animation-name: bounceDown;

    animation-name: bounceDown;

    }

    展开全文
  • 有缘结识使用CSS绘制的小箭头,发表出来跟大家分享一下:图:HTML代码:CSS代码:.pre-wrap {width: 200px;height: 120px;margin: 50px auto 0;border: 2px solid #F00;border-radius: 4px;position: relative;}.pre...

    有缘结识使用CSS绘制的小箭头,发表出来跟大家分享一下:

    图:

    37600642_1.png

    HTML代码:

    CSS代码:

    .pre-wrap {

    width: 200px;

    height: 120px;

    margin: 50px auto 0;

    border: 2px solid #F00;

    border-radius: 4px;

    position: relative;

    }

    .pre {

    width: 80px;

    height: 80px;

    position: absolute;

    top: 20px;

    left: 40px;

    }

    .pre1 {

    border-width: 40px;

    border-color: transparent #F30 transparent transparent;

    }

    .pre2 {

    border-width: 40px;

    border-color: transparent #FFF transparent transparent;

    position: relative;

    top: -80px;

    left: 15px;

    }

    .pre1, .pre2 {

    /*****设置border-style:dashed;使ie6支持border透明*****/

    border-style: dashed solid dashed dashed;

    /*****设置容器宽高为0*****/

    width: 0;

    height: 0;

    /*****去掉ie6下默认高度,设置以下属性*****/

    line-height: 0;

    font-size: 0;

    overflow: hidden;

    }

    展开全文
  • 用于创建各种类型的 CSS 箭头和三角形的 CSS 参考库。 您可以在查看有关此存储库内容的完整文章。 #build 我使用 prepros 来构建它。 content/style.scss 编译为 content/style.css 和 scripts/functions.js 编译为...
  • 箭头我们许多的美工前端使用的是图片来实现了,如果我们不使用图片直接使用css要如何来实现呢,下面我们来看一篇关于纯CSS实现小箭头的方法吧,具体如下。 我们大多数的小箭头都是用小图片来做的,这里分享一款用...

    小箭头我们许多的美工前端使用的是图片来实现了,如果我们不使用图片直接使用css要如何来实现呢,下面我们来看一篇关于纯CSS实现小箭头的方法吧,具体如下。

    a_33166

    我们大多数的小箭头都是用小图片来做的,这里分享一款用纯CSS写的小箭头,大家可以看看,以后会放出更多的CSS小箭头来供大家参考。

    .pre-wrap {

    width: 200px;

    height: 120px;

    margin: 50px auto 0;

    border: 2px solid #F00;

    border-radius: 4px;

    position: relative;

    }

    .pre {

    width: 80px;

    height: 80px;

    position: absolute;

    top: 20px;

    left: 40px;

    }

    .pre1 {

    border-width: 40px;

    border-color: transparent #F30 transparent transparent;

    }

    .pre2 {

    border-width: 40px;

    border-color: transparent #FFF transparent transparent;

    position: relative;

    top: -80px;

    left: 15px;

    }

    .pre1, .pre2 {

    /*****设置border-style:dashed;使ie6支持border透明*****/

    border-style: dashed solid dashed dashed;

    /*****设置容器宽高为0*****/

    width: 0;

    height: 0;

    /*****去掉ie6下默认高度,设置以下属性*****/

    line-height: 0;

    font-size: 0;

    overflow: hidden;

    }

    展开全文
  • } 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框 在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,...
  • 1,箭头html:css:.d1{width: 0;height: 0;border-width: 10px;border-style: solid;border-color: transparent transparent transparent #339933;position: relative;left: 20px;cursor: pointer;}.d1:after{content...
  • css技巧之手写css箭头

    2020-02-24 23:05:28
    css实现一个黑色的三角箭头
  • 纯CSS实现tooltip提示框,CSS箭头及形状 原文:纯CSS实现tooltip提示框,CSS箭头及形状本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3...
  • CSS箭头效果

    2012-05-11 13:49:36
    利用CSS :AFTER :BEFORE selector实现菜单带箭头效果
  • css 箭头的实现

    2014-07-11 16:09:02
    CSS 实现箭头符号 CSS代码: .pr_risk-bar_mark--target__prev, .pr_risk-bar_mark--target__next{ position: absolute; top: 50%; margin-top: -8px; width: 0; height: 0; border-top: 8px solid ...
  • 在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状  不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇...
  • CSS箭头,气泡

    千次阅读 2013-08-09 10:34:15
     CSS Triangles  演示地址:CSS Triangles Demo  原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的...
  • css箭头图片方向转换

    2017-07-19 11:27:00
    箭头转为下箭头 { transform: rotate(90deg);}右箭头转为上箭头 { transform: rotate(-90deg);}右箭头转为左箭头 { transform: rotate(180deg);} 转载于:https://www.cnblogs.com/SunSong/p/7204798.html...
  • CSS 箭头和线条代码

    千次阅读 2018-09-05 14:01:42
    2018年4月25日 /*箭头*/ div:before { position: absolute; top: 50%; right: 15px; margin-top: -4px; content: " "; display: inline-block; height: 6px; width: 6px; borde...
  • 1.左箭头 html: <div class="a"></div> style: .a { width: .3rem; height: .3rem; border-top: 2px solid #e6e6e6; border-right: 2px solid #e6e...
  • 纯手工打造css箭头

    2012-08-28 15:34:44
  • jquery弹出层 +CSS箭头制作

    千次阅读 2015-01-29 16:09:41
    1、如果浏览器不支持CSS3,我们可以用border模拟。但是这个时候箭头不能带边框,即纯色,不太好看,这个时候我们可以利用两个b标签实现: 首先需要制作一个向上的箭头箭头的颜色为弹出层边框颜色,其它方向可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,279
精华内容 17,311
关键字:

css箭头