操场图片:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #div1{ width: 90px; height: 50px; background: skyblue; border:5px solid red; border-top-left-radius: 255px ; border-bottom-left-radius: 255px; border-top-right-radius: 255px ; border-bottom-right-radius: 255px; } </style> </head> <body> <div id="div1"></div> </body> </html>
扇形:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #div2{ width: 0px;height: 0; border: 50px solid white; border-bottom-color: lightblue; border-radius: 50%; } </style> </head> <body> <div id="div2"></div> </body> </html>
三角形
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #div3{ width: 0px;height: 0px; border: 50px solid white; border-bottom-color: lightblue; } </style> </head> <body> <div id="div3"></div> </body> </html>