如何才能做出左侧有箭头的DIV_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:17:14
原创
1585人浏览过

本帖最后由 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></head><body><div class="rc_box1">        <div class="rc_box2">        <div class="rc_box3">            oh~!my god god god god!        </div>    </div>    <div class="lov1"></div>    <div class="lov2"></div>    <div class="ov1"></div>    <div class="ov2"></div></div></body></html>
登录后复制

2楼的真是高手,这么快就搞出来了
非常感谢!!!!

请问哈2楼,那在右边的小箭头怎么弄啊、我试着做了哈,还是没完全成功,请教,谢啦!!

请教哈怎么在右边加小箭头啊,我是了哈,没完全成功,请问,谢谢!!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号