css樣式中三角形的應用

程式碼如下：
<!DOCTYPE html>
<html lang="en"><head>    
<meta charset="UTF-8">    
<title>Title</title>   
 <style>      
  body{
            margin: 150px  auto 0;
            text-align: center;
            background: #6d6d6d;
        }      
  h3{
            margin-bottom: 50px;
        }      
  .tooltip{
            display: inline-block;margin: 0 10px;
            padding: 10px;
            background: #ccc; 
           border-radius: 10px;
           border: 1px solid #1EC679;
            position: relative;
        } 
.tooltip:before,.tooltip:after{
            display: none; 
           position: absolute;
        }     
   .tooltip:hover:before,.tooltip:hover:after{ 
           display: block;
        }        /*定義矩形*/       
 .tooltip:before{ 
           content: attr(alter);
            width: 120px;
            height: 30px;
            border: 1px solid #1EC679;
            text-align: center;
            border-radius: 5px; 
           line-height: 30px;
            color: #eeeeee; 
           background: #5db85d;
        }      
  /*定義三角形*/    
    .tooltip:after{
            width: 0;
            height: 0;
            content: '';
            position: absolute;
            border: solid transparent;
            border-width: 8px;
        }       
 /*左側*/    
    .left:before{
            left: -150px;
            top: 50%;
            margin-top: -15px;
        }      
  .left:after{
            border-left-color: #5db85d;
            left: -30px;
            top: 50%;
            margin-top: -8px;
        }     
   /*右側*/   
     .right:before{
            right: -150px;
            top: 50%; 
           margin-top: -15px;
        }     
   .right:after{
            border-right-color: #5db85d;
            right: -30px;
            top: 50%;
            margin-top: -8px; 
       }      
  /*上側*/   
     .top:before{
            left: 50%;
            margin-left:-60px;
            top: -51px;
        }       
 .top:after{
            border-top-color: #5db85d;
            left:50%;
           margin-left: -8px; 
           top: -20px;
        }     
   /*下側*/    
    .bottom:before{ 
           left: 50%;
            margin-left:-60px;
            bottom: -51px;
        }    
    .bottom:after{
            border-bottom-color: #5db85d;
            left:50%;
            margin-left: -8px; 
           bottom: -20px; 
       }    
</style>
</head>
<body>   
     <h3>使用position、before、after、border編寫tooltip樣式</h3>    
    <div class="tooltip left" alter="left">tooltip left</div>    
    <div class="tooltip top" alter="top">tooltip top</div>   
     <div class="tooltip bottom" alter="bottom">tooltip bottom</div>
    <div class="tooltip right" alter="right">tooltip right</div>
</body>
</html>
複製程式碼
css樣式中三角形的應用

相關文章
