css 三角符组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
    /* 浮动与清浮动 */

    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .cf {
        *zoom: 1
    }
    .cf:after {
        clear: both;
        content: ‘.‘;
        display: block;
        height: 0;
        overflow: hidden
    }
    /* 三角符号 */

    .arrow_t,
    .arrow_r,
    .arrow_b,
    .arrow_l {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        margin: 0 4px;
        display: inline-block;
        border: 6px dashed transparent;
    }
    .arrow_t {
        border-bottom: 6px solid #40cfea;
        border-top: 0 none;
    }
    .arrow_r {
        border-left: 6px solid #40cfea;
        border-right: 0 none;
    }
    .arrow_b {
        border-top: 6px solid #40cfea;
        border-bottom: 0 none;
    }
    .arrow_l {
        border-right: 6px solid #40cfea;
        border-left: 0 none;
    }
    /* 带边框的三角符号 */

    .border_arrow_t,
    .border_arrow_r,
    .border_arrow_b,
    .border_arrow_l {
        line-height: 20px;
        border: 1px solid #40cfea;
        padding: 3px 6px;
        display: inline-block;
        background: #e4f6fa;
        color: #40cfea;
        position: relative;
        margin: 0 4px
    }
    .border_arrow_t b,
    .border_arrow_r b,
    .border_arrow_b b,
    .border_arrow_l b,
    .border_arrow_t i,
    .border_arrow_r i,
    .border_arrow_b i,
    .border_arrow_l i {
        position: absolute;
        height: 0;
        width: 0;
        line-height: 0;
        font-size: 0;
        border: 6px dashed transparent;
    }
    .border_arrow_l b {
        border-right: 6px solid #40cfea;
        left: -6px;
        top: 50%;
        margin-top: -4px;
        border-left: 0 none;
    }
    .border_arrow_l i {
        border-right: 6px solid #e4f6fa;
        left: -5px;
        top: 50%;
        margin-top: -4px;
        border-left: 0 none;
    }
    .border_arrow_r b {
        border-left: 6px solid #40cfea;
        right: -6px;
        top: 50%;
        margin-top: -4px;
        border-right: 0 none;
    }
    .border_arrow_r i {
        border-left: 6px solid #e4f6fa;
        right: -5px;
        top: 50%;
        margin-top: -4px;
        border-right: 0 none;
    }
    .border_arrow_t b {
        border-bottom: 6px solid #40cfea;
        top: -6px;
        left: 50%;
        margin-left: -4px;
        border-top: 0 none;
    }
    .border_arrow_t i {
        border-bottom: 6px solid #e4f6fa;
        top: -5px;
        left: 50%;
        margin-left: -4px;
        border-top: 0 none;
    }
    .border_arrow_b b {
        border-top: 6px solid #40cfea;
        bottom: -6px;
        left: 50%;
        margin-left: -4px;
        border-bottom: 0 none;
    }
    .border_arrow_b i {
        border-top: 6px solid #e4f6fa;
        bottom: -5px;
        left: 50%;
        margin-left: -4px;
        border-bottom: 0 none;
    }
    /* 半透明背景 */

    .btm,
    .btm_hover:hover {
        color: #fff;
        filter: progid: dximagetransform.microsoft.gradient(enabled=‘true‘, startcolorstr=‘#44000000‘, endcolorstr=‘#44000000‘)
    }
    :root .btm,
    :root .btm_hover {
        filter: none;
        background: rgba(0, 0, 0, 0.2);
    }
    </style>
</head>

<body>
    <span class="arrow_t"></span>
    <span class="arrow_r"></span>
    <span class="arrow_b"></span>
    <span class="arrow_l"></span>
    <span class="border_arrow_t"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_r"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_b"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_l"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
</body>

</html>
时间: 03-06

css 三角符组件的相关文章

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

1.CSS选择符有哪些? 类型选择符(body).群组选择符(h1,h2,h3,span).包含选择符(h2 span).ID选择符(#id).Class选择符(.content) 2.哪些属性可以继承? CLASS属性,伪类A标签,列表ul.li.dl.dd.dt可以继承 3.优先级算法如何计算? 优先级就近原则 版权声明:本文为博主原创文章,未经博主允许不得转载.

CSS选择符优先级引起的样式失效

选择符优先级带来的样式失效: 由于CSS选择符优先级可能引起某些样式失效,这个问题初学者可能会碰上,但是往往并不容易发现. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落

30个你必须记住的CSS选择符

30个你必须记住的CSS选择符 整理 本文摘自:http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/ 04 January 2014 号外号外:专注于移动端的fullPage.js来啦!!!快点我查看 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1

jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入

1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS DIV 1</title> <script type="text/javascript" src="js/jquery-3.0.0.js"&g

转发-css 选择符

此文章仅为转发,非原创,原文 css 选择符   请支持原创 css参考手册:css.doyoe.com 在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的 -webkit 代表chrome.safari私有属性 -moz 代表firefox浏览器私有属性 -ms 代表IE浏览器私有属性 -o 代表opera浏览器私有属性 css语法结构 css语法由

css那些事儿1 css选择符与管理

结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型项目平台的建设机会是很难能够大纵深的切入,恰恰前端通过编写微信公众号作为一个切入点,希望不会再也找不到工作,再也无法跳巢的尴尬境地. 1 css语法 选择符{属性:value}css的语法非常简单. 2 css常见简写 color:#ffffff ;color:rgb(255,255,255);rg

CSS选择符

一.选择符类型及使用 1.html标记,在CSS中可选择要实现目标的标记, 如:P{属性:值} 2.多个html标记,可在CSS中写相对的标记用逗号隔开. 如:h1,h2,h3,h4,h5{属性:值} 3.选择符在已经使用过的标记,再重复添加需在已经添加的样式下一行方可实现. 如要添加在前面,可用 [!important][IE浏览器不支持]. 如: h2{color:green !important;} h2,h3,h4,h5{color:grey; font-size:36px;} 二.id

HTML/CSS 选择符优先级

CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000) < style内部样式 < link外部引入样式 选择符的相应值综合相加起来大的优先级高 注 : 相应值仅仅是代表他们的等级, 11个类型选择符的优先级仍然小于1个类选择符,以此类推 3.important(IE7及以上) 加了important的样式属性优先级最高. 例 .box{backg

CSS选择符总结(Selectors)

一.通配选择符(Universal Selector): 语法:* 说明:1.*表示通配符,表示所有的            2.格式:*{样式列表}            3.用于整个页面或网站字体.边距.背景等 例子: 1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type&