各种图形
半圆：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle1{width:200px;height:100px;background: red;border-radius:100px 100px 0 0;}
.circle2{width:100px;height:200px;background: red;border-radius:100px 0 0 100px;}
</style>
</head>
<body>
<div class="circle1"></div>
<br /><br /><br /><br />
<div class="circle2"></div>
</body>
</html>
四分之一圆：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #fan{ width:0; height:0; border-radius:100px; border:100px solid; border-color:red transparent transparent transparent; overflow:hidden; margin: 30px auto; } </style> </head> <body> <div id="fan"></div> </body> </html>
平行四边形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #parallelogram { width: 150px; height: 100px; transform: skew(20deg); background: red; } </style> </head> <body> <div id="parallelogram"></div> </body> </html>
上梯形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } </style> </head> <body> <div id="trapezoid"></div> </body> </html>
五边形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{position: relative;top:100px;} #pentagon { position: relative; width: 54px; border-top: 50px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -127px; left: -21px; border:47px solid transparent; border-bottom:30px solid red; } </style> </head> <body> <div class="wrap"> <div id="pentagon"></div> </div> </body> </html>
六边形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{position: relative;top:100px;} #hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -70px; left: 0; width: 0; height: 0; border:50px solid transparent; border-bottom:20px solid red; } #hexagon:after { content: ""; position: absolute; bottom: -70px; left: 0; width: 0; height: 0; border:50px solid transparent; border-top:20px solid red; } </style> </head> <body> <div class="wrap"> <div id="hexagon"></div> </div> </body> </html>
心型：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{position: relative;top:100px;} #heart {position: relative;} #heart:before,#heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(45deg); } #heart:before { left: 30px; transform: rotate(-45deg); } </style> </head> <body> <div class="wrap"> <div id="heart"></div> </div> </body> </html>
弯尾箭头：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .right{ position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; transform: rotate(10deg); } .right:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; transform: rotate(45deg); } } </style> </head> <body> <div class="right"></div> </body> </html>
无限符号：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{position: relative;top:100px;} #infinity { position: relative; width: 212px; height: 100px; } #infinity:before,#infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; border-radius: 60px 60px 0 60px; transform: rotate(-45deg);} #infinity:after { left: auto; right: 0; border-radius: 60px 60px 60px 0; transform: rotate(45deg); } </style> </head> <body> <div class="wrap"> <div id="infinity"></div> </div> </body> </html>
吃人豆：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #pacman { width: 0px; height: 0px; border: 60px solid red; border-radius: 60px; border-right: 60px solid transparent; } </style> </head> <body> <div id="pacman"></div> </body> </html>
放大镜：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 50px; height: 50px; border-radius: 50%; border: 5px solid #333; position: relative; } div::after { content: ''; display: block; width: 8px; height: 60px; border-radius: 5px; background: #333; position: absolute; right: -22px; top: 38px; transform: rotate(-45deg); } </style> </head> <body> <div></div> </body> </html>
购物车：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .shopcar{width:200px;height:60px;margin:100px auto;position:relative;background: red;border-radius:5px;text-align: center;line-height:60px;font-size:20px;color:#fff;} .shopcar b{height:30px;text-align:center;line-height:30px;padding:2px 10px;background: yellow;position: absolute;top:-10px;right:16px;border-radius:20px 20px 20px 2px;} </style> </head> <body style="background:#ccc;"> <div class="shopcar">我的购物车<b>0</b></div> </body> </html>
提示框：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .comment-bubble { display: inline-block; /*内容撑开宽度*/ height: 40px; background: red; position: relative; border-radius: 12px; font-size:14px; line-height:40px; color:#fff; padding:0 10px; } .comment-bubble:before { content: ""; /*内容为空*/ position: absolute; right:100%; /*right:100%正好跑到最左边*/ top: 14px; border-top: 6px solid transparent; border-right: 12px solid red; border-bottom: 6px solid transparent; } </style> </head> <body> <div class="comment-bubble">这是必填字段</div> </body> </html>
