一.Css绘图
1.1css绘制三角形
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型 - 三角形</title> <style type="text/css"> #box{ width: 0; height: 0; border: 100px solid blue; border-color: blue transparent transparent transparent; /*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/ } </style> </head> <body> <div id="box"> </div> </body> </html>
运行效果：
2.css绘制爱心
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #heart { position: relative; width: 100px; height: 90px; } #heart:after,#heart:before { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0px 0px; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } </style> </head> <body> <div id="heart"> </div> </body> </html>
运行效果：
3.css绘制返回图标
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .back{ width: 200px; height: 66px; border:20px solid #494831; border-radius: 0px 50px 50px 0px; border-left: none; position: relative; } .back:before{ content: ''; width: 20px; background: white; height:0px; position: absolute; top: 52px; border: 24px solid saddlebrown; border-color: transparent #494831 transparent transparent; } </style> </head> <body> <div class="back"> </div> </body> </html>
运行效果：
4.css3 attr的使用
html结构
<div class="test" data-title="测试">hello</div>
css
.test{
margin: 60px;
border: 1px solid saddlebrown;
position: relative;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
}
.test:hover::after{
content: attr(data-title);
position: absolute;
text-align: center;
100px;
padding: 10px 20px;
border-radius: 4px;
border: 1px seagreen solid;
top: -50px;
left: -50%;
}
运行效果：
