年齡與疾病,共2行,第一行為過往病人的數目n(0 < n <= 100),第二行為每個病人患病時的年齡。
阿新 • • 發佈:2021-02-04
ennnn 就隨便寫寫
圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS</title> </head> <style> * { margin: 0; padding: 0; } .container { margin: auto; width: 2000px; display: flex; flex-direction: row; } .container div { margin: 40px 20px; } .box { width: 100px; height: 100px; overflow: hidden; position: relative; } .a { width: 180px; height: 100px; border-radius: 50%; background: pink; position: absolute; z-index: -1; left: -60px; top: -55px; } .triangle { width: 0; height: 0; border: 20px solid transparent; border-bottom-color: thistle; } .cicle { background-color: teal; height: 40px; width: 40px; border-radius: 40px 0 0 0; } .arc { background-color: tan; height: 40px; width: 40px; border-radius: 40px 0; transform: rotate(45deg); } .message { height: 40px; width: 100px; border-radius: 15px; position: relative; background-color: slategrey; line-height: 40px; text-align: center; color: #fff; } .message::before { position: absolute; content: ""; height: 0px; width: 0px; border: 10px solid transparent; border-top-color: slategrey; top: 40px; left: 25px; } .rectangle { width: 40px; height: 0px; border: 20px solid teal; border-color: transparent transparent teal; } .ball { height: 40px; width: 40px; border-radius: 50%; background: radial-gradient(circle at 40px 40px, tan, #fff) } .rhombua { height: 30px; width: 30px; transform: rotateZ(43deg) skew(30deg, 30deg); background-color: aquamarine; } .hert { height: 30px; width: 30px; background-color: red; transform: rotateZ(45deg); } .hert::after, .hert::before { content: ""; width: 100%; height: 100%; border-radius: 50%; display: inline-block; background-color: red; } .hert::after { position: absolute; left: 0px; top: -50%; } .hert::before { position: relative; top: 0%; left: -50%; } /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */ /* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */ .shadow { height: 40px; width: 100px; box-shadow: 0px 0px 10px thistle; border: none; font-size: 10px; text-indent: 0em; text-align: center; line-height: 20px; } .boxColor { background-clip: text; -webkit-background-clip: text; color: transparent; height: 40px; width: 200px; background-image: url('./2.png'); background-size: cover; } #star-five { margin: 50px 0; position: relative; display: block; color: slategrey; width: 0px; height: 0px; border-right: 50px solid transparent; border-bottom: 35px solid slategrey; border-left: 50px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 40px solid slategrey; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; height: 0; width: 0; top: -23px; left: -34px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: slategrey; top: 3px; left: -54px; width: 0px; height: 0px; border-right: 50px solid transparent; border-bottom: 35px solid slategrey; border-left: 50px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } </style> <body> <div class="container"> <div class="box"> <div class="a"></div> </div> <div class="triangle"></div> <div class="cicle"></div> <div class="arc"></div> <div class="message">訊息框</div> <div class="rectangle"></div> <div class="ball"></div> <div class="rhombua"></div> <div class="hert"></div> <div class="shadow"> box-shadow around it.</div> <div class="boxColor"> 背景色字型前景色咔咔咔咔咔咔擴擴擴擴擴 </div> <div id="star-five"> </div> </div> </body> </html>