展会信息港展会大全

纯css定义带箭头的窗口代码
来源:互联网   发布日期:2016-03-25 16:31:25   浏览:2508次  

导读:前天看一个朋友的css写了一个很漂亮的带箭头效果,以为是图片做的,后来发现他是无图片带箭头的css实例代码,下面我拿过来有用的朋友可以试一下。代码如下 复制代码...

前天看一个朋友的css写了一个很漂亮的带箭头效果,以为是图片做的,后来发现他是无图片带箭头的css实例代码,下面我拿过来有用的朋友可以试一下。

代码如下

复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<head>

<title>无图片带箭头的窗口(二)</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

.rc_box1,.rc_box2,.rc_box3{display:inline-block;*display:inline;*zoom:1;position:relative;border-style:solid;border-color:#ddd;}

.rc_box2,.rc_box3{border-width:0 1px;*left:-2px;background-color:#f3f3f3;}

.rc_box1{border-width:1px;line-height:1.5;}

.rc_box2{margin:0 -2px;}

.rc_box3{margin:1px -2px;padding:0 6px;}

.ov1,.ov2{position:absolute;left:44%;overflow:hidden;width:0;height:0;border-left:6px dotted transparent;border-right:6px dotted transparent;

border-top:6px solid transparent;}

.lov1,.lov2{position:absolute;top:34%;overflow:hidden;width:0;height:0;border-top:6px dotted transparent;border-bottom:6px dotted transparent;

border-right:6px solid transparent;}

.ov1{top:26px;border-top-color:#ddd;}

.ov2{top:25px;border-top-color:#f3f3f3;}

.lov1{left:-9px;border-right-color:#ddd;}

.lov2{left:-8px;border-right-color:#f3f3f3;}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div class="rc_box1">

<div class="rc_box2">

<div class="rc_box3">oh, my god! http://www.111cn.net</div>

</div>

<div class="lov1"></div>

<div class="lov2"></div>

<div class="ov1"></div>

<div class="ov2"></div>

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港