Maison >interface Web >tutoriel HTML >如何才能做出左侧有箭头的DIV_html/css_WEB-ITnose
如何才能做出左侧有箭头的DIV_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:17:141429parcourir
下面的代码是箭头向下的
箭头在左侧的怎么也弄不出来
<!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楼，那在右边的小箭头怎么弄啊、我试着做了哈，还是没完全成功，请教，谢啦！！
请教哈怎么在右边加小箭头啊，我是了哈，没完全成功，请问，谢谢！！
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：DIV怎么相对顶层框架定位？_html/css_WEB-ITnoseArticle suivant：我准备做一个论坛想请教点问题_html/css_WEB-ITnose