新浪实现的带箭头的文本框

春来燕晓:

<!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=utf-8" />
<title>无标题文档</title>
<style>

.comment{padding:10px; border-radius:3px;border:1px solid #e1e4e5;position:relative; width:500px; background:#fcfcfc;

      }

.arrow {_display:none;position:absolute;top:-11px;left:20px;overflow:hidden;display:block;

      }

.arrow .out{display:inline-block;overflow:hidden;color:#e1e4e5;

      }

.arrow .inside{top:1px;color:#fbfbfb;left:0px;position:absolute;

      }
</style>
</head>

<body>

<div class="comment">

   <div class="arrow">

      <span class="out">◆</span>

      <span class="inside">◆</span>

   </div>

         <p>带小三角的提示框</p>
   <p>带小三角的提示框</p>
   <p>带小三角的提示框</p>

</div>
</body>
</html>

评论
热度 ( 1 )
  1. sunny的花园春来燕晓 转载了此文字