Heim >Web-Frontend >HTML-Tutorial >如何才能做出左侧有箭头的DIV_html/css_WEB-ITnose
如何才能做出左侧有箭头的DIV_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:141423Durchsuche
下面的代码是箭头向下的
箭头在左侧的怎么也弄不出来
<!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楼，那在右边的小箭头怎么弄啊、我试着做了哈，还是没完全成功，请教，谢啦！！
请教哈怎么在右边加小箭头啊，我是了哈，没完全成功，请问，谢谢！！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：DIV怎么相对顶层框架定位？_html/css_WEB-ITnoseNächster Artikel：我准备做一个论坛想请教点问题_html/css_WEB-ITnose