zoukankan      html  css  js  c++  java
  • CSS Triangle Arrow DIVs tooltilps

    来自:http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

    An subtle characteristic of CSS that's been exploited to do something interesting is CSS borders and using it to create pure CSS triangles. These triangles have the advantage of being extremely lightweight (no image used) and scalable to boot. The technique works using the fact that the 4 CSS borders of an element meet at an angle; when the dimensions of the element is set to 0, the 4 borders collapse and touch one another, creating the appearance of 4 triangles。

    当元素的尺寸为0(width:0;height:0) 时,4个border折叠在一起,生成了4个小三角型。

    Here's the CSS used to create the above DIV:

    Style:

    #triangles{
    margin:3em; //可以不要
    0; /*set dimensions of DIV to 0 so its borders collapse and touch one 
    another*/
    height:0;
    border-color: red blue green yellow; /*top, right, bottom, and left border*/
    border-style: solid;
    border- 50px; /*width of each border*/
    }

    border-就是小三角形的高度。

    <div id="triangles"></div>

    To display just a specific triangle then, you would set the border-color of all but the desired border side to transparent.

    The following adds a CSS based triangle to a DIV to produce a speech bubble look that can be used to show comments, quotes etc. Each arrow is added to the DIV with no markup used by way of CSS Generated Content. The result are regular DIVs injected with progressive CSS enhancements that degrade well in less capable browsers.

    Demo:

     

    <div class="uparrowdiv">
    This is a test
    </div>
    .uparrowdiv{
    width:600px;
    min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
    background: black;
    color:white;
    padding:5px;
    position:relative;
    word-wrap:break-word;
    -moz-border-radius:5px; /*add some nice CSS3 round corners*/
    -webkit-border-radius:5px;  
    border-radius:5px;
    margin-bottom:2em;
    }
    
    .uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
    content:'';
    display:block;
    position:absolute;
    top:-20px; /*should be set to -border-width x *2 */
    left:30px;
    width:0;
    height:0;
    border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
    border-style: solid;
    border-width: 10px;
    
    }

    其实第一个样式表目的就是创建长方形的黑色背景的框。

    第二个样式表就是创建长方形上面的小三角形。我们使用:after创建了一个内容为空的元素。

    然后设置显示为block(为了设置0 height:0为0,只有block可以设置width height),position为absolute第一个样式表设置为relative就是为了是小三角形在长方形定位)。我们设置了小三角形的维度为0.

    键是设置top:-20 为border-width 的2部,使小三角上移到div的上面

     

     

  • 相关阅读:
    js 文件的操作
    js重点基础知识 以及小案例_最简单的轮播图 简单的动态表格( encodeURIComponent()编码比 encodeURI()编码)
    2阶——数据库连接池 c3p0 , druid, dbcp (其实所有的连接池都实现了dataSource接口,就可以调用getconnection方法)
    2阶——JDBC,JDBCTemplate(操作数据库)
    vue + django 批量删除
    简单的模糊搜索 Vue + django
    vue 父子组件传参简单的分页
    vue 多对多反序列化上传图片
    模型里的 抽象类 表继承
    django 多对多反序列添加
  • 原文地址:https://www.cnblogs.com/youxin/p/2666848.html
Copyright © 2011-2022 走看看