帮忙看上css
日期：2014-05-17 浏览次数：20648 次
帮忙看下css
-------------------------------------------
-------------------------------------------
--------------------------------------------
我想把左边那箭头改成像这样子的，请问怎么改？
------解决方案--------------------
难道是这种？？？
<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>
-------------------------------------------
- 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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
