CSS制作三角边框

比眉伴天荒 2022-08-07 13:35 192阅读 0赞

<!DOCTYPE HTML>  
<html lang="en-US">  
<head>  
<meta charset="UTF-8">  
<title>字符制作三角边框</title>  
<style type="text/css">  
\*\{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类  
  
  
   <div class="speech-bubble speech-bubble-top">Hi there</div>  
  
  
\*/  
.speech-bubble \{  
  position: relative;  
  background-color: \#292929;  
  width: 200px;  
  height: 150px;  
  line-height: 150px;   
  color: white;  
  border-radius: 10px;  
  font-family: sans-serif;  
  
  
\}\*/  
.speech-bubble:after \{  
  
  
  content: '';  
  
  
  position: absolute;  
  width: 0;  
  height: 0;  
  border: 15px solid  
\}  
  
  
  
  
.speech-bubble-top:after \{  
  border-bottom-color:\#0000FF;  
  left: 50%;  
  bottom: 100%;  
  margin-left: -15px;  
  
  
\}  
  
  
.speech-bubble-right:after \{  
  
  
  border-left-color: \#292929;  
  left: 100%;  
  top: 50%;  
  margin-top: -15px;    
\}  
.speech-bubble-bottom:after \{  
  
  
  border-top-color: \#292929  
  top: 100%;  
  left: 50%;  
  margin-left: -15px;   
\}  
.speech-bubble-left:after \{  
  
  
  border-right-color: \#292929;  
  
  
  top: 50%;  
  
  
  right: 100%;  
  
  
  margin-top: -15px;    
  
  
\}  
  
  
</style>  
</head>  
<body>  
<h1>demo1 是用 margin 方法</h1>  
    <div class="demo1">  
       <em>&\#9670;</em>  
       <span>&\#9670;</span>  
    </div>  
<h1>demo2 是用 position 方法</h1>  
<div class="demo2">  
<em>&\#9670;</em>  
    <span>&\#9670;</span>  
</div>  
  
  
  
  
  
  
 <div class="speech-bubble speech-bubble-top">  
        </div>  
        <div class="speech-bubble speech-bubble-bottom">  
  
  
            箭头在底部  
  
  
        </div>  
  
  
        <div class="speech-bubble speech-bubble-left">  
  
            箭头在左侧  
  
        </div>  
  
  
         <br/>  
        <div class="speech-bubble speech-bubble-right">  
            箭头在右侧  
  
  
        </div>  
  
  
</body>  
</html>