چگونه یک کدو تنبل خالص CSS درست کردم.

در حال حاضر HTML واقعاً چیزی را تغییر نمی دهد، اما هنوز چیزی را نشان نمی دهد. زمان CSS است.

body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

این خروجی 3 بیضی نارنجی کامل را در کنار هم به نمایش می گذارد. اینجا چه خبر است؟ ابتدا با استفاده از تگ body، div کدو تنبل را در مرکز صفحه وسط می کنیم. ما این کار را با 3 خط اول انجام می دهیم. بعد، استفاده می کنیم height: 100vh; برای اینکه به کد بگویید تگ بدنه 100 درصد صفحه را اشغال کرده است. بدون این، برچسب بدنه فقط به اندازه محتوا خواهد بود، به این معنی که بیضی ها در بالای صفحه در مرکز قرار می گیرند. بنابراین در اینجا چیزی است که به نظر می رسد.

بعد، ما می‌خواهیم دایره‌ها روی هم قرار بگیرند، این کار را می‌توان به راحتی با دادن حاشیه منفی به بیضی‌های چپ و راست انجام داد.

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

بنابراین در اینجا ما Ovel سمت راست را با 45 پیکسل به سمت چپ و Ovel چپ را با 45 پیکسل به سمت راست منتقل می کنیم. (من قصد ندارم عکسی از این مرحله اضافه کنم زیرا هنوز راهی برای ذخیره کردن عکس ها ندارم)

حالا برای قسمت سخت تر (بعضی، بسیار خوب از گوگل استفاده شده است)

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

بنابراین width ، height، border-radius و background-color کاملا خود توضیحی هستند بنابراین من از آن می گذرم شروع با position: absolute; کاری که این کار انجام می دهد حذف div از جریان وب سایت است. در عوض، بر اساس نزدیکترین نقطه لنگر است. position: absolute; می توان روی هر عنصری قرار داد. در مرحله بعد، برای وسط ساقه به صورت افقی استفاده می کنیم left: 50% و transform: translateX(-50%); وقتی به آن فکر می کنید منطقی است اما برای شروع باید به آن فکر کنید left: 50% لبه سمت چپ ساقه را در داخل قسمت کدو تنبل قرار می دهد. می خواهم مرکز ساقه در مرکز کدو باشد. transform: translateX(-50%); ساقه را به اندازه نصف ساقه به سمت چپ حرکت می دهد. top: -47px; تقریباً همان چیزی را که انتظار دارید انجام می دهد. لبه بالایی را 47 پیکسل به سمت بالا حرکت می دهد. z-index چیزی است که اخیراً پیدا کرده ام، اساساً ارتفاع عنصر. من می خواهم که z-index پشت کدو تنبل باشد، بنابراین به آن یک علامت می دهم z-index : -1 در حالی که کدو تنبل دارای شاخص پیش فرض 0 است. این چیزی است که به نظر می رسد.

در نهایت چشم، دهان و پس زمینه. بیایید با چشم شروع کنیم،

.left_eye {
left: 70%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0  30px  41px  50px;
border-color: transparent  transparent  #000000  transparent;
}
.right_eye {
left: 30%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0  50px  41px  30px;
border-color: transparent  transparent  #000000  transparent;
}

بنابراین این ترسناک تر از آنچه هست به نظر می رسد border-width: 0 50px 41px 30px; بنابراین در اینجا طول هر ضلع مربع را تعیین می کنیم. از بالا شروع می شود و در جهت عقربه های ساعت حرکت می کند. بنابراین، بالای مربع 0 طول دارد. این به این دلیل است که مثلث ها 3 ضلع دارند. سپس سمت راست 50 پیکسل، پایین 50 پیکسل و سمت چپ 30 پیکسل طول دارد. برای چشم راست، مقادیر چپ و راست را برمی‌گردانیم تا در جهت دیگر باشد. border-color: transparent transparent #000000 transparent; بنابراین ممکن است تعجب کنید که چرا این همه شفاف وجود دارد. خوب می بینید که در اینجا 3 مثلث وجود دارد (یکی از آنها به دلیل 0 عرض وجود ندارد) ما فقط می خواهیم مثلث پایین را رنگ کنیم بنابراین 3 مثلث دیگر را شفاف قرار می دهیم. border-style: solid; ما می خواهیم مثلث پر جامد باشد بنابراین باید استایل را روی Solid قرار دهیم. ما واقعاً مثلث را پر نکرده‌ایم، در عوض، یک مرز واقعاً بزرگ داریم، بنابراین به نظر می‌رسد که داریم. بعد از همه اینها، ما اکنون چشم داریم.

آخرین مرحله لبخند است.

.smile {
position: absolute;
width: 80px;
height: 25px;
top: 90px;
left: 25%;
background-color: rgb(0, 0, 0);
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 5px  solid  rgb(0, 0, 0);
border-bottom: 0;
transform: rotate(190deg)
}

border-top-left-radius: 110px; و border-top-right-radius: 110px; مشخص کنید که گوشه های بالایی چقدر گرد خواهند بود. این همان بیتی است که نیم دایره را می سازد، اما منحنی را نیز در بالا قرار می دهد. برای رفع این مشکل اضافه کردم transform: rotate(190deg) برای چرخاندن آن به صورت Smile و استفاده می شود left: 25%; تا کمی از مرکز خارج شود. بنابراین در اینجا نتیجه نهایی است.

قلم را ببینید
کدو تنبل 100% CSS توسط micfun123 (@micfun123)
در CodePen.

اعتراف می کنم که این زیباترین راه حل یا کارآمدترین راه حل نیست، با این حال، اولین بار بود که سعی کردم چیزی در CSS ترسیم کنم و نسبتاً از آن راضی هستم. مثل همیشه در مورد Discord یا reddit نظر خود را به من بدهید.