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

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

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

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

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

<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

 

posted on 2016-02-18 17:28 AdolphYang 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/adolphyang/p/5198836.html