怎么才能做出左侧有箭头的DIV-HTML教程-爱易网页

怎么才能做出左侧有箭头的DIV

日期：2014-05-17　浏览次数：20835 次

如何才能做出左侧有箭头的DIV

本帖最后由 DirecPC 于 2010-06-03 13:10:29 编辑

下面的代码是箭头向下的
箭头在左侧的怎么也弄不出来

<!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>

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

<title>无标题文档</title>

<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;}

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

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

</style>

</head>



<body>

<div class="rc_box1">

    <div class="rc_box2">

        <div class="rc_box3">

            oh~!my god god god god!

        </div>

    </div>

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

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

</div>

</body>

</html>

------解决方案--------------------
箭头在左侧

<!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>

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

<title>无标题文档</title>

<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&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么才能做出左侧有箭头的DIV

相关资料更多>

推荐阅读更多>