帮忙看上css

2012-08-30

帮忙看下css-------------------------------------------CSS code.test{width:300px padding:30px 20px

帮忙看下css

-------------------------------------------

CSS code

.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}.test span.bot{    border-width:20px;     border-style:solid;     border-color:#ffffff #beceeb #beceeb #ffffff;     left:-40px;     top:40px;}.test span.top{    border-width:10px 20px;     border-style:dashed solid solid dashed;     border-color:transparent #ffffff #ffffff transparent;     left:-40px;     top:60px;}

-------------------------------------------

HTML code

<div class="test">    <span class="bot"></span>    <span class="top"></span>    CSS “边框法”实现气泡对话框效果一</div>

--------------------------------------------
我想把左边那箭头改成像这样子的，请问怎么改？

[解决办法]
难道是这种？？？

<style type="text/css">
#daniel{
border-color: transparent rgba(111,111,111,0.2) transparent transparent ;
border-style: solid;
border-width: 8px;
position: absolute;
top:16px;
left:42px;
}
#aa{
padding-top:5px;
text-align:center;
width:150px;
height:25px;
background-color:rgba(111,111,111,0.2);
margin-left:50px;
}
</style>
</head>
<body>
<div id="daniel"></div>
<div id="aa">昵称已经被占用</div>
</body>

热点排行