<p class="sycode"> <!DOCTYPE HTML> <br> <html lang="en-US"> <br> <head> <br> <meta charset="UTF-8"> <br> <title>字符制作三角边框</title> <br> <style type="text/css"> <br> *{margin:0;padding:0;} <br> body{font-family:SimSun;} <br> h1{text-align:center;} <br> .demo1{ <br> width:100px; <br> margin:20px auto; <br> border:1px solid red; <br> height:100px; <br> } <br> .demo1 em,.demo1 span <br> { <br> display:block; <br> width:30px; <br> height:15px; <br> font-size:30px; <br> overflow:hidden; <br> _position:relative; <br> margin-left:20px; <br> } <br> .demo1 em{ <br> margin-top:-16px; <br> color:red; <br> font-style:normal; <br> } <br> .demo1 span <br> { <br> margin-top:-14px; <br> color:white; <br> } <br> <br> <br> <br> <br> .demo2{ <br> width:300px; <br> border:1px solid #F00; <br> height:100px; <br> position:relative; <br> margin-left:auto; <br> margin-right:auto; <br> } <br> .demo2 em,.demo2 span{ <br> font-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;} <br> .demo2 span{ <br> left:-14px; <br> color:white; <br> } <br> /* <br> <br> <br> 对话气泡 <br> <br> <br> 用法:使用.speech-bubble和.speech-bubble-DIRECTION类 <br> <br> <br> <div class="speech-bubble speech-bubble-top">Hi there</div> <br> <br> <br> */ <br> .speech-bubble { <br> position: relative; <br> background-color: #292929; <br> width: 200px; <br> height: 150px; <br> line-height: 150px; <br> color: white; <br> border-radius: 10px; <br> font-family: sans-serif; <br> <br> <br> }*/ <br> .speech-bubble:after { <br> <br> <br> content: ''; <br> <br> <br> position: absolute; <br> width: 0; <br> height: 0; <br> border: 15px solid <br> } <br> <br> <br> <br> <br> .speech-bubble-top:after { <br> border-bottom-color:#0000FF; <br> left: 50%; <br> bottom: 100%; <br> margin-left: -15px; <br> <br> <br> } <br> <br> <br> .speech-bubble-right:after { <br> <br> <br> border-left-color: #292929; <br> left: 100%; <br> top: 50%; <br> margin-top: -15px; <br> } <br> .speech-bubble-bottom:after { <br> <br> <br> border-top-color: #292929 <br> top: 100%; <br> left: 50%; <br> margin-left: -15px; <br> } <br> .speech-bubble-left:after { <br> <br> <br> border-right-color: #292929; <br> <br> <br> top: 50%; <br> <br> <br> right: 100%; <br> <br> <br> margin-top: -15px; <br> <br> <br> } <br> <br> <br> </style> <br> </head> <br> <body> <br> <h1>demo1 是用 margin 方法</h1> <br> <div class="demo1"> <br> <em>◆</em> <br> <span>◆</span> <br> </div> <br> <h1>demo2 是用 position 方法</h1> <br> <div class="demo2"> <br> <em>◆</em> <br> <span>◆</span> <br> </div> <br> <br> <br> <br> <br> <br> <br> <div class="speech-bubble speech-bubble-top"> <br> </div> <br> <div class="speech-bubble speech-bubble-bottom"> <br> <br> <br> 箭头在底部 <br> <br> <br> </div> <br> <br> <br> <div class="speech-bubble speech-bubble-left"> <br> <br> 箭头在左侧 <br> <br> </div> <br> <br> <br> <br/> <br> <div class="speech-bubble speech-bubble-right"> <br> 箭头在右侧 <br> <br> <br> </div> <br> <br> <br> </body> <br> </html> </p>