ساخت اشکال مختلف با استفاده از CSS

ساخت اشکال مختلف با استفاده از CSS

10 0
۱۳۹۹/۰۸/۲۶

تقریبا با css میشه خیلی از اشکال هایی که فکرش رو نمیکنین بسازین برای همین با آموزش ساخت اشکال مختلف با استفاده از CSS در خدمت شما هستیم.

ساخت اشکال مختلف یا shape ها بسیار ساده هستن و معمولا با border ها درست میشن یا بعضی از جاها از before و after استفاده میکنیم.

مهم نیست نیاز به چه اشکالی دارین از اشکالی مانند قلب و فلش و آیکون سرچ بگیرین تا حتی آیکون قفل :)

ساخت مثلث به سمت بالا:

ساخت اشکال مختلف با CSS
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

ساخت مثلث به سمت پایین:

ساخت اشکال مختلف با CSS
#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

ساخت ستاره 5 پر با css:

ساخت اشکال مختلف با استفاده از CSS
#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

ساخت 5 ضلعی با css:

ساخت اشکال مختلف با CSS
#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

ساخت شش ضلعی با css:

ساخت اشکال مختلف با استفاده از CSS
#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

ساخت قلب با css

ساخت اشکال مختلف با استفاده از CSS
#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

ساخت ذره بین با css

ساخت اشکال مختلف با استفاده از CSS
#magnifying-glass {
  font-size: 10em;
  display: inline-block;
  width: 0.4em;
  box-sizing: content-box;
  height: 0.4em;
  border: 0.1em solid red;
  position: relative;
  border-radius: 0.35em;
}
#magnifying-glass:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
  transform: rotate(45deg);
}

ساخت قفل با css

ساخت اشکال مختلف با استفاده از CSS
#lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid red;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid ted;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

دیدین که با css میشه خیلی از اشکال رو ساخت نظرتون در مورد این پست چی بود؟ البته ناگفته نماند با کمی خلاقیت و دستکاری شکل های زیادی رو میتونین خلق کنین که میتونن نیاز شما رو برطرف کنن کافیه کمی با border ها و همینطور before و after کار کنین تا بتونین تو این کار حرفه ای بشین.

امیدوارم آموزش ساخت اشکال مختلف با استفاده از CSS براتون مفید بوده باشه منبع این پست هم سایت ترفند های css هستش.

آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت

36 برنامه نویسی وب
آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت

آموزش ساخت منوی چسبنده ( Sticky Menu ) بدون جاوا اسکریپت

امروز با آموزش ساخت منوی چسبنده در خدمت شما هستیم حتما تو خیلی از سایت ها دیدین که وقتی اسکرول میکنید منو به بالای صفحه میچسبه. خوب خیلی از دوستان این کار رو با جاوا اسکریپت با jquery انجام میدن. منظورم کار زیر هستش: شاید پیش خودتون فکر کنین ما اصلا چرا باید ایننکار رو […]

در حال پاسخ به: ایمان آقاپور
نمایش پیام ها

ثبت درخواست مشاوره

logo mihandesign

بزودی با شما تماس خواهیم گرفت

شماره تماس: 09024184107
پست الکرونیک: support@mihandesign.com
عملیات موفق آمیز بود
عملیات ناموفق بود