您可以在倉庫 Github 上找到本文中的所有程式碼。
您可以在此處查看 CodeSandbox 的視覺效果。
如何在 CSS 中繪製正方形、梯形、三角形、異形三角形、扇形、圓形、半圓、固定寬高比、0.5px 線?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Shapes</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="square"></div> <div class="trapezoidal"></div> <div class="triangle"></div> <div class="ano-triangle"></div> <div class="sector"></div> <div class="circle"></div> <div class="half-circle"></div> <div class="fixed-width-height-ratio"></div> <div class="half-one-px-line">0.5px line</div> </body> </html>
.square { width: 100px; height: 100px; border-top: 50px solid red; border-bottom: 50px solid blue; border-right: 50px solid green; border-left: 50px solid orange; } .trapezoidal { width: 100px; height: 100px; border: 50px solid transparent; border-bottom-color: tomato; } .triangle { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: tomato; } .sector { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: tomato; border-radius: 50%; } .circle { width: 100px; height: 100px; border-radius: 50%; background-color: tomato; } .half-circle { width: 100px; height: 50px; background-color: tomato; border-top-left-radius: 50px; border-top-right-radius: 50px; } .fixed-width-height-ratio { padding-top: 56.25%; background-color: blue; width: 100%; } .half-one-px-line { background-color: aqua; border-bottom: 1px solid black; transform: scaleY(0.5) scaleX(0.5); transform-origin: 0 0; }
以上是形狀 - CSS 挑戰的詳細內容。更多資訊請關注PHP中文網其他相關文章!