CSS制作三角边框_html/css_WEB-ITnose

字符制作三角边框

*{margin:0;padding:0;}
body{font-family:SimSun;}
h1{text-align:center;}
.demo1{
width:100px;
margin:20px auto;
border:1px solid red;
height:100px;
}
.demo1 em,.demo1 span
{
display:block;
width:30px;
height:15px;
font-size:30px;
overflow:hidden;
_position:relative;
margin-left:20px;
}
.demo1 em{
margin-top:-16px;
color:red;
font-style:normal;
}
.demo1 span
{
margin-top:-14px;
color:white;
}




.demo2{
width:300px;
border:1px solid #F00;
height:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
.demo2 em,.demo2 span{
font-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;}
.demo2 span{
left:-14px;
color:white;
}
/*


对话气泡


用法：使用.speech-bubble和.speech-bubble-DIRECTION类

Hi there

查看更多关于CSS制作三角边框_html/css_WEB-ITnose的详细内容...