فصل چهارم : Properties در CSS
جلسه پنجم : اشکال هندسی مختلف با border
سلام به همراهان همیشگی مدرسه مجازی ایرانیان
دوستان در جلسه ی پیش با Border آشنا شدید ، در این جلسه قصد دارم تعدادی از اشکال هندسی که با Border قابل پیاده سازی هست رو خدمتتون معرفی کنم. تصاویر همراه با کد در زیر درج شده و شما دوستان میتونید استفاده کنید . در انتها هم میتونید فایل مربوط به این جلسه که شامل تمامی اشکال هست رو دانلود کنید .
|
1 2 3 4 5 6 7 8 |
#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; } |
|
1 2 3 4 5 6 7 8 |
#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } |
|
1 2 3 4 5 6 7 |
#up-triangle { width: 0; height: 0; border-bottom: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; } |
|
1 2 3 4 5 6 7 |
#down-triangle { width: 0; height: 0; border-top: 80px solid pink; border-left: 60px solid transparent; border-right: 60px solid transparent; } |
|
1 2 3 4 5 6 7 |
#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } |
|
1 2 3 4 5 6 7 |
#right-triangle { width: 0; height: 0; border-left: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } |
|
1 2 3 4 5 6 7 |
#trapezium { height: 0; width: 80px; border-bottom: 80px solid blue; border-left: 40px solid transparent; border-right: 40px solid transparent; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#octagon { width: 100px; height: 100px; background: blue; } #octagon:before { height: 0; width: 40px; content:""; position: absolute; border-bottom: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; } #octagon:after { height: 0; width: 40px; content:""; position: absolute; border-top: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; margin: 70px 0 0 0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#speech-bubble { width: 120px; height: 80px; background: purple; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #speech-bubble:before { content:""; position: absolute; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid purple; border-bottom: 13px solid transparent; margin: 13px 0 0 -25px; top: 5%; left: 0; } |
|
1 2 3 4 5 6 7 8 9 |
#egg { display:block; width:126px; height:180px; background-color:green; -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid yellow; border-left: 60px solid yellow; border-bottom: 60px solid yellow; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
.biohazard { width: 0; height: 0; border-bottom: 60px solid black; border-top: 60px solid black; border-left: 60px solid yellow; border-right: 60px solid yellow; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } |
تهیه شده در مدرسه مجازی ایرانیان
دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com
دیدگاه های مخاطبین
لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.
خیلی جالب بود
و البته کاربردی
ممنون