<p class="sycode"> <br> <br> </p> <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 <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> <br> <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> <br>
