CSS实战
来源:互联网 发布:java面试电商项目逻辑 编辑:程序博客网 时间:2024/06/05 09:46
1、实现效果
2、实现原理
采用绝对定位使 div 元素定位在左上角,在 div 里面画三角形作为背景。
画三角的三种方法:
① 使用线性渐变的背景色,从左上角向右下角(135度角)进行渐变,渐变到50%时把颜色设为透明
② 使用 border 属性制作三角形,设定 div 宽高都为0,定义上边框(border-top)的属性,并把右边框(border-right)的颜色设为透明
③ 定义一个带背景色的 div,旋转45度角,利用 margin 调整位置,使 div 的一条边和角落的两条线相交,对超出内容部分进行隐藏
3、具体代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS实战 - 角标</title><style type="text/css"> body { background-color: #333; color: #fff; } .container { position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; border: 1px solid rgba(255, 255, 255, 0.3); background: #fff; } /************以下为具体实现************/ .superscript { position: absolute; top: 0px; left: 0px; width: 130px; height: 130px; overflow: hidden; }/* 使用背景色渐变 */ .superscript .gradual { width: 100%; height: 100%;background: linear-gradient(135deg, #31b968 50%, transparent 50%); }/* 使用三角形 */ .superscript .triangle {width: 0; height: 0; border-top: 130px solid #31b968; border-right: 130px solid transparent; } /* 使用矩形旋转, 和父节点的 overflow:hidden 配合 */ .superscript .rect { width: 183px; height: 183px; margin: -91px 0 0 -91px; background: #31b968; transform: rotateZ(45deg); } .superscript .desc { position: absolute; top: 20%; left: 20%; z-index: 1; }</style></head><body><div class="container"><div class="superscript"><!-- 角标的三种实现 --><!-- <div class="gradual"></div> --><!-- <div class="triangle"></div> --><div class="rect"></div><div class="desc">角标</div></div></div></body></html>
阅读全文
0 0
- CSS实战
- CSS实战
- CSS实战
- css实战之css画图
- 《CSS实战手册》书评
- 《CSS实战手册》书评
- 关于CSS实战,选择器
- CSS hack实战
- 挑战最佳CSS实战
- CSS实战(1)
- CSS实战(2)
- CSS实战(3)
- CSS实战(4)
- HTML+CSS实战提升
- CSS实战note
- CSS实战(代码部分)
- XML、XSL、CSS实战
- CSS实战:DIV+CSS排版布局
- phpcms 生成微信签名
- Python BeautifulSoup4的使用方法
- 1009. Product of Polynomials (25)
- HTTP缓存详解
- python字典值比较脚本
- CSS实战
- HDU
- 51nod 1478-括号序列的最长合法子段(模拟)
- 算法-字符串全排列问题
- vue常见报错记录
- 1039. 到底买不买(20) Hash散列
- Expedition
- Date、Calender和SimpleDateFormat类
- 知识点:CSS实现一个图案