How to make a DIV_html/css_WEB-ITnose with an arrow on the left-HTML Tutorial-php.cn

How to make a DIV_html/css_WEB-ITnose with an arrow on the left

WBOY

Release： 2016-06-24 12:17:14

Original

1400 people have browsed it

This post was last edited by DirecPC on 2010-06-03 13:10:29

The code below has an arrow pointing downwards
The arrow on the left cannot be found

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

Copy after login

Reply to the discussion (solution)

The arrow is on the left

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

Copy after login

The 2nd floor is really Master, you got it done so quickly
Thank you very much!!!

Excuse me on the 2nd floor, how do you get the little arrow on the right? I tried it, but it still wasn’t completely successful. Please advise, thank you! !

Please tell me how to add a small arrow on the right. I did it. It was not completely successful. Please tell me. Thank you! !