对话框css3实现方式_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 08:49:07959浏览
<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伪类作为三角的边框//此对话框是自适应屏幕大小的 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn