اشکال هندسی مختلف با border

فصل چهارم : Properties در CSS

جلسه پنجم : اشکال هندسی مختلف با border

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در جلسه ی پیش با Border آشنا شدید ، در این جلسه قصد دارم تعدادی از اشکال هندسی که با Border قابل پیاده سازی هست رو خدمتتون معرفی کنم. تصاویر همراه با کد در زیر درج شده و شما دوستان میتونید استفاده کنید . در انتها هم میتونید فایل مربوط به این جلسه که شامل تمامی اشکال هست رو دانلود کنید .

#circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

#circle {

width: ۱۴۰px;

height: ۱۴۰px;

background: red;

-moz-border-radius: ۷۰px;

-webkit-border-radius: ۷۰px;

border-radius: ۷۰px;

}

#oval {
   width: 200px; 
   height: 100px; 
   background: purple; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

#oval {

width: ۲۰۰px;

height: ۱۰۰px;

background: purple;

-moz-border-radius: ۱۰۰px / ۵۰px;

-webkit-border-radius: ۱۰۰px / ۵۰px;

border-radius: ۱۰۰px / ۵۰px;

}

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

#up-triangle {

width: ۰;

height: ۰;

border-bottom: ۱۲۰px solid green;

border-left: ۶۰px solid transparent;

border-right: ۶۰px solid transparent;

}

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 80px solid pink;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

#down-triangle {

width: ۰;

height: ۰;

border-top: ۸۰px solid pink;

border-left: ۶۰px solid transparent;

border-right: ۶۰px solid transparent;

}

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

#left-triangle {

width: ۰;

height: ۰;

border-right: ۱۰۰px solid orange;

border-top: ۵۰px solid transparent;

border-bottom: ۵۰px solid transparent;

}

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

#right-triangle {

width: ۰;

height: ۰;

border-left: ۱۰۰px solid red;

border-top: ۵۰px solid transparent;

border-bottom: ۵۰px solid transparent;

}

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

#trapezium {

height: ۰;

width: ۸۰px;

border-bottom: ۸۰px solid blue;

border-left: ۴۰px solid transparent;

border-right: ۴۰px solid transparent;

}

#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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

#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: 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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

#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:126px; 
   height:180px;
   background-color:green;
   -webkit-border-radius:63px 63px 63px 63px/
   ۱۰۸px 108px 72px 72px;
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

#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: 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;
}

۱۰

۱۱

۱۲

.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: 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;
}

۱۰

۱۱

.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;

}

تهیه شده در مدرسه مجازی ایرانیان

اشکال هندسی مختلف با border

حسین همت یار

۱ دیدگاه

شما همچنین دوست خواهید

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

جدیدترین آموزش ها

آخرین دیدگاه ها

اموزش تصادفی