css实现两边有缺口的卡券效果
2015-10-09 16:45
811 查看
自己项目用到优惠券的样式,特拿来分享。主要用到了css的position: absolute属性。
效果如下图:
废话不多说,直接上代码
效果如下图:
废话不多说,直接上代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>验证券样式</title> <style> body{ background-color: #E2DFDF; } .div{ position: relative; width: 200px; height: 100px; margin:100px auto; background-color: #fff; } .yuan1{ position: absolute; width: 20px; height: 20px; border-radius: 20px; background-color: #E2DFDF; left: -10px; top:40px; } .yuan2{ position: absolute; width: 20px; height: 20px; border-radius: 20px; background-color: #E2DFDF; right: -10px; top:40px; } </style> </head> <body> <div class="div"> <div class="yuan1"></div> <div class="yuan2"></div> </div> </body> </html>
相关文章推荐
- Div CSS absolute与relative的区别小结
- relative absolute无法冲破的等级问题解决第1/3页
- CSS定位中Positoin、absolute、Relative的一些研究
- css position: absolute、relative详解
- css定位——position和float的用法详解
- absolute relative fixed static inherit
- js 图片轮换
- 基于jquery的loading 加载提示效果实现代码
- maven web 工程部署
- position的使用方法
- css定位
- 整理关于css中position与float的一些用法
- 纯css解决position:abusolute的div居中显示
- 层叠加的五条叠加法则
- CSS定位机制——普通流、浮动、定位
- HTML中Position属性的定位区别x
- css position取值的含义和理解
- 【转载】[CSS] CSS position 觀念筆記心得
- Simplify Path Leetcode71
- relative absolute float 定位总结