تصویر الهه عربیان
تا حالا شده نیاز به طراحی اشکال هندسی کنین برای یه وب سایت و ندونین چیکار کنین نهایتش یه عکس بزارید؟ امشب که داشتم با بی حوصلگی تو اینترنت میچرخیدم یه تیتر جالب دیدم گفتم شاید برای شما ها هم جالب باشه

گاهی پیش میاد که برای بعضی از سایتها احتیاج به پیاده سازی شکلهایی بجز مربع و دایره وبیضی داریم گاهی میخوایم مثلا چند ضلعی داشته باشیم یا ستاره یا هر چیزی دیگه ای برای این کار چکاری باید انجام داد؟

برای طراحی یه مثلث رو به بالا :

#triangle-up {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 0;
}

 یا برای طراحی ذوزنقه :

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

یا برای طراحی ستاره 5پر :

#star-five:before {
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: "";
    display: block;
    height: 0;
    left: -65px;
    position: absolute;
    top: -45px;
    transform: rotate(-35deg);
    width: 0;
}
#star-five:after {
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    color: red;
    content: "";
    display: block;
    height: 0;
    left: -105px;
    position: absolute;
    top: 3px;
    transform: rotate(-70deg);
    width: 0;
}
#star-five {
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    color: red;
    display: block;
    height: 0;
    margin: 50px 0;
    position: relative;
    transform: rotate(35deg);
    width: 0;
}

برای پیاده سازی علامت بی نهایت :

#infinity:before, #infinity:after {
    border: 20px solid red;
    border-radius: 50px 50px 0;
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    width: 60px;
}
#infinity:after {
    border-radius: 50px 50px 50px 0;
    left: auto;
    right: 0;
    transform: rotate(45deg);
}
#infinity:before, #infinity:after {
    border: 20px solid red;
    border-radius: 50px 50px 0;
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    width: 60px;
}
#infinity {
    height: 100px;
    position: relative;
    width: 212px;
}

درسته شاید بگید یه عکس برا میزارم انقدر هم CSS نمیزنم خیلی هم راحتتره ولی واقعا گاهی خوبه با کدهای CSS بازی کنیم و به عکس اکتفا نکنیم برای اینکه نمونه های بیشتری رو ببینین به ShapesOfCSS  یه سری بزنین حتما لذت میبرید .

دیدگاه‌ها

افزودن نظر جدید