فصل چهارم : Properties در CSS
جلسه پنجم : اشکال هندسی مختلف با border
سلام به همراهان همیشگی مدرسه مجازی ایرانیان
دوستان در جلسه ی پیش با Border آشنا شدید ، در این جلسه قصد دارم تعدادی از اشکال هندسی که با Border قابل پیاده سازی هست رو خدمتتون معرفی کنم. تصاویر همراه با کد در زیر درج شده و شما دوستان میتونید استفاده کنید . در انتها هم میتونید فایل مربوط به این جلسه که شامل تمامی اشکال هست رو دانلود کنید .
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
#circle { width: ۱۴۰px; height: ۱۴۰px; background: red; -moz-border-radius: ۷۰px; -webkit-border-radius: ۷۰px; border-radius: ۷۰px; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
#oval { width: ۲۰۰px; height: ۱۰۰px; background: purple; -moz-border-radius: ۱۰۰px / ۵۰px; -webkit-border-radius: ۱۰۰px / ۵۰px; border-radius: ۱۰۰px / ۵۰px; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
#up-triangle { width: ۰; height: ۰; border-bottom: ۱۲۰px solid green; border-left: ۶۰px solid transparent; border-right: ۶۰px solid transparent; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
#down-triangle { width: ۰; height: ۰; border-top: ۸۰px solid pink; border-left: ۶۰px solid transparent; border-right: ۶۰px solid transparent; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
#left-triangle { width: ۰; height: ۰; border-right: ۱۰۰px solid orange; border-top: ۵۰px solid transparent; border-bottom: ۵۰px solid transparent; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
#right-triangle { width: ۰; height: ۰; border-left: ۱۰۰px solid red; border-top: ۵۰px solid transparent; border-bottom: ۵۰px solid transparent; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
#trapezium { height: ۰; width: ۸۰px; border-bottom: ۸۰px solid blue; border-left: ۴۰px solid transparent; border-right: ۴۰px solid transparent; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ |
#octagon { width: ۱۰۰px; height: ۱۰۰px; background: blue; } #octagon:before { height: ۰; width: ۴۰px; content:""; position: absolute; border-bottom: ۳۰px solid blue; border-left: ۳۰px solid white; border-right: ۳۰px solid white; } #octagon:after { height: ۰; width: ۴۰px; content:""; position: absolute; border-top: ۳۰px solid blue; border-left: ۳۰px solid white; border-right: ۳۰px solid white; margin: ۷۰px ۰ ۰ ۰; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ |
#speech-bubble { width: ۱۲۰px; height: ۸۰px; background: purple; position: relative; -moz-border-radius: ۱۰px; -webkit-border-radius: ۱۰px; border-radius: ۱۰px; } #speech-bubble:before { content:""; position: absolute; width: ۰; height: ۰; border-top: ۱۳px solid transparent; border-right: ۲۶px solid purple; border-bottom: ۱۳px solid transparent; margin: ۱۳px ۰ ۰ -۲۵px; top: ۵%; left: ۰; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
#egg { display:block; width:۱۲۶px; height:۱۸۰px; background-color:green; -webkit-border-radius:۶۳px ۶۳px ۶۳px ۶۳px/ ۱۰۸px ۱۰۸px ۷۲px ۷۲px; border-radius:۵۰% ۵۰% ۵۰% ۵۰%/۶۰% ۶۰% ۴۰% ۴۰%; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ |
.pacman { width: 0px; height: 0px; border-right: ۶۰px solid transparent; border-top: ۶۰px solid yellow; border-left: ۶۰px solid yellow; border-bottom: ۶۰px solid yellow; border-top-left-radius: ۶۰px; border-top-right-radius: ۶۰px; border-bottom-left-radius: ۶۰px; border-bottom-right-radius: ۶۰px; } |
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
.biohazard { width: ۰; height: ۰; border-bottom: ۶۰px solid black; border-top: ۶۰px solid black; border-left: ۶۰px solid yellow; border-right: ۶۰px solid yellow; -moz-border-radius: ۶۰px; -webkit-border-radius: ۶۰px; border-radius: ۶۰px; } |
تهیه شده در مدرسه مجازی ایرانیان
دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com
دیدگاه های مخاطبین
لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.
خیلی جالب بود
و البته کاربردی
ممنون