Home > Article > Web Front-end > How to make a DIV_html/css_WEB-ITnose with an arrow on the left
How to make a DIV_html/css_WEB-ITnose with an arrow on the left
- WBOYOriginal
- 2016-06-24 12:17:141396browse
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> 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> 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! !
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn