一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^

先来个简单点的吧,上效果图

刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的时候发现,哇!原来这么简单,我这脑袋瓜咋没反应过来呢,所以整理了下顺便简化了分享出来,希望对大家有帮助。

<div class="demo"></div>

<style>
.demo{
    width:0;
    height:0px;
    border:100px solid transparent;
    border-color:#f00 #ff0 #05f #0f0;
}
</style>

OK了,直接设置一个边框的大小,然后颜色顺序:上、右、下、左;是不是感觉很神奇呢。

来接着第二个,这是由3个标签组成的,还是先上效果图:

源代码先贴这儿:

<div class="demo">
    <div class="out"></div>
    <div class="in"></div>
</div>

先用一个大的div设置边框样式、相对定位,样式如下:

.demo{
    width:200px;
    height:200px;
    border:2px solid #f30;

position:relative;
}

接下来是上面的小箭头,如果是实心的就用一个标签就可以了,这里是空心的所以我就用了两个标签

先把箭头一样的样式写一起

.out,.in{
        position:absolute;
        width:0;
        height:0px;
        }

接下来是箭头的边框了,就是这里的out标签

.out{
        border:20px solid transparent;
        border-bottom-color:#f30;  /*这里的颜色一定要跟上面demo边框颜色一样*/
        top:-40px;
        left:20%;
        }

如果是实心的箭头到这一步就可以了哦·还是来张效果图吧

接下来继续把箭头变成空心的,原理跟上面实心的一样,只需要把它的大小变小一点,位置移一下,颜色跟demo背景颜色一样就ok了;

.in{
        border:18px solid transparent;
        border-bottom-color:#fff;/*这里的颜色一定要跟demo背景颜色一样*/

top:-35px;
        left:21%;
        }

这样一个带箭头边框的样式就完成了,是不是很简单呢,欢迎补充,欢迎指教!

http://www.zcool.com.cn/article/ZMTU2NTky.html

div+css制作带箭头提示框效果图(原创文章)的更多相关文章

  1. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  2. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  3. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  4. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  8. Div+Css制作圆

    Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...

  9. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

随机推荐

  1. Windows系统 本地文件如何复制到远程服务器

    很多人在使用远程服务器的时候往往要将本地的文件传输到远程服务器内,方法有很多种,下面介绍下如何使用Windows自带的远程桌面连接程序将文件复制到远程服务器内. 1.首先,点击windows开始按钮, ...

  2. inline-block和同级的text-align问题

    https://www.cnblogs.com/qjqcs/p/5551640.html margin:0 auto:是设置块标签在父级中居中对齐,是一种对齐方式.所以对于display:inline ...

  3. table-layout 属性

    最近被测试提了一个bug,表单的某个字段有1300的字数限制,测试填了1300字,提交后,表格上的呈现丑爆了,那个字段的所在的列撑满了整个表格,其他列被压缩的很小. 后来知道了table-layout ...

  4. webview 详解

    [原文] 1. 打开网页时不调用系统浏览器, 而是在本WebView中显示: mWebView.setWebViewClient(new WebViewClient(){ @Override publ ...

  5. python使用笔记

    修改文件模板,支持中文. File -> Settings -> Editor -> File and Code templates -> python Scropt 在里面加 ...

  6. mssql 函数STUFF 的用法

    DECLARE @limitDay INT;SET @limitDay = 92;IF DATEDIFF(DAY, '2017-12-13 00:00:00', '2017-12-13 18:00:0 ...

  7. Flume-NG启动过程源码分析(三)(原创)

    上一篇文章分析了Flume如何加载配置文件的,动态加载也只是重复运行getConfiguration(). 本篇分析加载配置文件后各个组件是如何运行的? 加载完配置文件订阅者Application类会 ...

  8. JNI_C#

    1. 基本就是 通过 JAVA --> C/C++ --> C#的DLL 2. (1).自己写 JNI与 C#的DLL 通信 http://www.cnblogs.com/yinhaimi ...

  9. hibernate报错org.hibernate.HibernateException: No CurrentSessionContext configured!

    org.hibernate.HibernateException: No CurrentSessionContext configured! at org.hibernate.internal.Ses ...

  10. UML类图(二)--------类与类之间的关系之依赖,继承,接口与实现关系

     依赖(Dependency)关系是一种使用关系,特定事物的改变有可能会影响到使用该事物的其他事物,在需要表示一个事物使用另一个事物时使用依赖关系.大多数情况下,依赖关系体现在某个类的方法使用另一个类 ...