<！DOCTYPE HTML> <HTMLのxmlns = " http://www.w3.org/1999/xhtml " > <HEAD> <META HTTP-当量= " Content-Typeの"コンテンツ= " text / htmlの;のcharset = UTF- 8 " /> <タイトル> </ TITLE> <スタイル> * { マージン：0PX。 パディング：0PX。 } #show { マージン：10pxの自動。 位置：絶対; トップ：は50px; 左：は50px; テキスト - 揃えます：センター; } #some { 幅：200pxの。 マージン - 左：100ピクセル; テキスト - 揃える：センター; 位置：絶対; 背景 -color：RGBA（255、0、0、0.6 ）。 国境 - 半径：5pxの; } #info { 幅：400ピクセル。 高さ：300ピクセル; 位置：絶対; } #outarrow { ボーダー -色：透明透明#efefef。 国境 - スタイル：固体; ボーダー - 幅：16pxに; 高さ：0 ; 幅：0 ; 位置：絶対; トップ：0PX。 左：184px; } #innerarrow { ボーダー - 色：透明、透明ホワイト。 国境 - スタイル：固体; ボーダー - 幅：16pxに; 高さ：0 ; 幅：0 ; 位置：絶対; トップ：0PX。 左：184px; マージン - トップ：計6Px。 } #content { ボーダー：4PX固体。 国境 - 半径：4PX。 ボーダー - 色：#efefef。 幅：400ピクセル; マージン：32PX自動0PX。 -moz-ボックスサイズ：BORDER- ボックス。 -webkit-ボックスサイズ：BORDER- ボックス。 ボックス -sizing：BORDER- ボックス。 } #content pが { テキスト - 整列：左; テキスト - インデント：20ピクセル; } </スタイル> </ HEAD> <BODY> の<divのid = " ショー" > <div要素のid = " 一部" >下面就是箭头效果</ div> <divのID = " 情報" > <div要素のid = " outarrow " > </ div> <DIV ID = " innerarrow " > </ div> <DIV ID = " <P>ポイント1：ボックスの幅と高さは、境界線の幅</ P>に設けられ、0に設定される <P> 2点：境界スタイルを変化させる効果によって</ P> </ div> </ div> </ DIV> </ BODY> </ HTML>
ディスプレイ：
