css三角箭头

效果:

css:

.jt {
        display:inline-block;    /*和后面的文字在同一行*/
        *display: inline;    /*ie6 7块级元素inline-block兼容*/
        *zoom:1;    /*同上*/
        height:0px;  
        width:0px; 
        line-height:0px;   /*行高设0,不然ie6会撑开*/
        vertical-align: middle;   /*与文字垂直居中对齐,如果依然相差一两个像素,可以设置相对定位,更改top值微调*/
        border:3px solid #000; 
        border-color: transparent #f00 transparent transparent;    /*设置一边为红色,其它透明*/
        border-style: dashed solid dashed dashed;    /*ie6不支持transparent属性,可以将透明边设置成dashed来兼容,不设的话,火狐会有灰边*/
        margin-right: 5px;
    }

时间: 2024-08-01 20:56:28

css三角箭头的相关文章

纯CSS制作的三角箭头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS制作的三角箭头丨kiddy<

css实现三角箭头

像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:10px 7px 0 7px; border-style:solid;border-color: #ccc transparent transparent transparent; 向下箭头 width:0px;height:0px;border-width:20px 10px 0 10px ; border-style:solid;border-color:#FFF

border实现三角箭头

1 <!DOCTYPE html> 2 <html> 3 <title> 边框属性实现三角箭头及其原理</title> 4 <meta charset="utf-8" /> 5 <head> 6 <style> 7 #demo { border: 10px solid #333; border-left-color: #f00; width: 10px; height: 10px; /*border-c

纯CSS 三角形箭头Div边框代码

<html> <head> <title>纯CSS实现 "三角箭头"代码</title> <meta http-equiv="Content-Language" content="zh-CN"/> <mce:style type="text/css"><!-- span {_overflow:hidden;} .wp {position: relat

纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)

<style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid yellow; /*以下属性可以是IE5兼容*/ font-size: 0px; line-heig

CSS带箭头的DIV方框,自适应高度

<html><head><title>CSS实现带箭头的DIV方框</title><style>s{position:absolute;top:-20px;*top:-22px;left:20px;display:block;height:0;width:0;font-size: 0; line-height: 0;border-color:transparent transparent #666 transparent;border-style

使用css写三角箭头

.right-arrow{ width:6px; height:6px; align-self: center; border-right:1px solid #2ac795; border-left:2px solid transparent; border-top:2px solid transparent; border-bottom:1px solid #2ac795; display:block; transform: rotateZ(-45deg); } 以上为向右的箭头,如果箭头向

纯css 画箭头

原理: 把容器的边框设置大一点,容器本身的长宽为0,只设置一边的颜色让其自然形成 箭头 参考文章 http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

jQuery对称三角箭头

具体原理可以参考我的这篇文章:jQuery弹出层+CSS箭头制作 使用方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he