视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[CSS3]CSS小图标效果圆角矩形与三角形

时间:2017-09-05 17:46酷播
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形

你是不是还没看过瘾呢？下面在来分享一下自己做的CSS小图标：对话框的制作

对话框的制作：

分析：对话框由一个三角形和一个圆角举行组成

实现：代码如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3.  
  4.     <head> 
  5.         <meta charset="UTF-8"> 
  6.         <title></title> 
  7.         <style type="text/css"> 
  8.             * { 
  9.                 margin: 0px; 
  10.                 padding: 0px; 
  11.             } 
  12.              
  13.             div { 
  14.                 margin: 100px; 
  15.             } 
  16.              
  17.             #comment_bubble { 
  18.                 width: 300px; 
  19.                 height: 100px; 
  20.                 background: #088cb7; 
  21.                 position: relative; 
  22.                 -moz-border-radius: 12px; 
  23.                 -webkit-border-radius: 12px; 
  24.                 border-radius: 12px; 
  25.             } 
  26.              
  27.             #comment_bubble:before { 
  28.                 content: ""; 
  29.                 width: 0; 
  30.                 height: 0; 
  31.                 right: 100%; 
  32.                 top: 38px; 
  33.                 position: absolute; 
  34.                 border-top: 13px solid transparent; 
  35.                 border-right: 26px solid #088cb7; 
  36.                 border-bottom: 13px solid transparent; 
  37.             } 
  38.         </style> 
  39.     </head> 
  40.  
  41.     <body> 
  42.         <p>消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。</p> 
  43.         <div id="comment_bubble"> 
  44.  
  45.         </div> 
  46.     </body> 
  47. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器