מחולל מעגלים של CSS — רדיוס גבול של 50%
עצב את רדיוס הגבול של CSS בצורה ויזואלית: ארבעה מחוונים פינתיים עצמאיים בפיקסלים או באחוזים, קיצור דרך קישור לכל הפינות למעגלים מיידיים וכדורים, בתוספת מצב כתם אורגני עם צורות אקראיות.
תוצאה
דף זה פותח את מחולל הגבול-רדיוס כאשר כל ארבע הפינות מקושרות ומוגדרות ל-50%, הערך שהופך תיבה למעגל באמצעות רק CSS. בכנות: על קופסה מרובעת זה יוצר עיגול מושלם, אבל על קופסה מלבנית אותם 50% מייצרים במקום אליפסה דמוית אצטדיון, מכיוון שכל פינה רק מעגלת את הרבע שלה.
ההבחנה הזו חשובה כי רדיוס הגבול של 50% היא הדרך הנפוצה ביותר לבנות אווטרים עגולים, תגי אייקונים ונקודות סטטוס ב-CSS - הרבה יותר פשוט מחיתוך מעגל עם מסיכה או ציור אחד ב-SVG, והוא נשאר חד בכל גודל מכיוון שמדובר באחוז יחסי, לא ברדיוס פיקסל קבוע.
החלף את הקופסה לגודל ריבוע קבוע ב-CSS שלך כדי לנעול את העיגול המושלם, או השאר אותה מלבני בכוונה לקבלת צורה דמוית גלולה - כך או כך, הפינות נשארות מקושרות כאן כך שמחוון יחיד שומר על כל ארבעתם מסונכרנים בזמן שאתה מעתיק את ה-CSS שנוצר.