對話框css3實現方式

時間 2019-11-12

標籤對話框 css3 css 實現方式欄目 CSS 简体版

原文原文鏈接

<style type="text/css">
 #box {
 margin-left:80px;
 margin-top:20px;
 padding-left:20px;
 height: 60px; 
 background: #2aa1c8;
 position: relative;
 
 border-radius:10px;
 border:1px solid #1c82a3;
}
#box:before{
   content:"";
   position: absolute;
   right: 100%;
   top: 16px;
   width: 0;
   height: 0;
   border-top: 12px solid transparent;
   border-right: 12px solid #1c82a3;
   border-bottom: 12px solid transparent;
}
#box:after {
   content:"";
   position: absolute;
   right: 100%;
   top: 18px;
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-right: 10px solid #2aa1c8;
   border-bottom: 10px solid transparent;
}
 
 </style> 
 <body class="">
    <div style="width:60px;height:60px;background:#ccc;float:left;"></div>
 <div id="box">對話框</div>
</body>
//before僞類做爲三角的邊框
//此對話框是自適應屏幕大小的

相關標籤/搜索