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
div+css制作带箭头提示框效果图(原创文章)的更多相关文章
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
随机推荐
- Myeclipse 快捷键使用
MyEclipse快捷键大全-------------------------------------MyEclipse 快捷键1(CTRL)----------------------------- ...
- 【bzoj2819】Nim(dfs序+树状数组/线段树)
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=2819 首先根据SG定理,可得若每堆石子数量的异或值为0,则后手必胜,反之先手必胜.于是 ...
- 分布式服务管理zookeeper的java api
zookeeper是一个分布式服务管理工具,本身具备高可用性,很多知名分布式系统入hadoop.Hbase等都采用zk管理. 常见的两个应用场景:1.服务的注册与发现 2.集群统一配置 下面看一下使用 ...
- 基于jetty镜像的ossfs镜像docker镜像构建
阿里云ossfs:https://help.aliyun.com/document_detail/32196.html?spm=5176.product31815.6.514.yVI0xM 以上是阿里 ...
- 内网批量测试登录机器工具,并且dir 目标机器c盘
// Ipc.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <stdio.h> #include <w ...
- cern-cloud-architecture
规模: 总体: 有26个Cell 一个数据中心运行控制节点,另外一个仅仅运行nova cell 统一,灵活 nova-api运行在VM中,当然需要至少一个部署在物理机上来启动VM. 每个cell只有一 ...
- c++ STL库deque和vector的例子
头文件wuyong.h: #pragma once #include<iostream> #include<vector> #include<deque> #inc ...
- Spring Cloud Ribbon实现客户端负载均衡
1.构建microservice-consumer-movie-ribbon项目,在pom.xml中引入ribbon依赖 在引入Eureka依赖的时候,默认里面含有ribbon依赖 2.添加@Load ...
- review37
线程的常用方法 1.start() 线程调用该方法将启动线程,使之从新建状态进入就绪队列排队. 2.run() 3.sleep() 4.isAlive() 线程处于新建状态时,线程调用isAlive( ...
- 搜索7--noi1804:小游戏
搜索7--noi1804:小游戏 一.心得 二.题目 1804:小游戏 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 一天早上,你起床的时候想:“我编程序这 ...