ورود

View Full Version : سوال: چطور این شکل رو با css ایجاد کنم ؟


yasharhi
پنج شنبه 09 مرداد 1393, 11:31 صبح
چطور این شکل رو با css ایجاد کنم ؟ و کلمه about us رو روی اون بنویسم ؟
http://www.upload7.ir/imgs/2014-07/59487636327646543079_thumb.png (http://www.upload7.ir/viewer.php?file=59487636327646543079.png)
ab.ali
پنج شنبه 09 مرداد 1393, 13:23 عصر
می تونی یک مستطیل ایجاد کنی، بعدش یک مثلث و به اون مثلث border-radius بدی، و متن رو هم روی مثلث بنویسی.
yasharhi
پنج شنبه 09 مرداد 1393, 13:30 عصر
مثلث رو چطور ایجاد کنم ؟
ab.ali
پنج شنبه 09 مرداد 1393, 13:55 عصر
http://css-tricks.com/snippets/css/css-triangle/
دانیال دزفولی
پنج شنبه 09 مرداد 1393, 14:28 عصر
مثلث درست کنه بعد اون مثلث رو دایره کنه؟

یه دیو درست کن و بهش border-radios 100px بده

در مورد after , before تحقیق کن (گوگل)
yasharhi
پنج شنبه 09 مرداد 1393, 14:47 عصر
من این کار رو کردم ولی شکل نیم دایره داره و اونطوری که باید میشد ، نشد
http://www.upload7.ir/imgs/2014-07/97768092393167906104_thumb.png (http://www.upload7.ir/viewer.php?file=97768092393167906104.png)
دانیال دزفولی
پنج شنبه 09 مرداد 1393, 14:49 عصر
خوب نیمی از دایراه رو بیارید بیرون
اگه ارتفاش 50
top:-25px
yasharhi
پنج شنبه 09 مرداد 1393, 14:56 عصر
خوب نیمی از دایراه رو بیارید بیرون
اگه ارتفاش 50
top:-25px

اگر عکس رو ببینید متوجه منظورم میشد . من نیم دایره رو ایجاد کردم ولی شکلی که می خواهم دقیقا نیم دایره نیست
http://www.upload7.ir/imgs/2014-07/97768092393167906104.png

توشیح شکل بالا : نیم دایره سمت راست با نوشته - چیزی که من می خواهم درست کنم
نیم دایره سمت چپ : نیم دایره ای که با css درست کردم و شبیه چیزی که می خواهم نیست


من می خواهم شبیه اون نیم دایره ای باشه که روش about us نوشته شده ولی این چیزی که خودم درست کردم شبیه اون نمیشه .
دانیال دزفولی
پنج شنبه 09 مرداد 1393, 15:01 عصر
اون سمت راستی رو خودم چند روز پیش دنبالش بودم نیگاه کنی تایپیک هم زدم ولی ...
ab.ali
پنج شنبه 09 مرداد 1393, 17:28 عصر
من کی گفتم مثلث رو دایره کنه، فقط گفتم به مثلث border-radius:5px بده یا همچین چیزی!!!
yasharhi
پنج شنبه 09 مرداد 1393, 18:08 عصر
من کی گفتم مثلث رو دایره کنه، فقط گفتم به مثلث border-radius:5px بده یا همچین چیزی!!!

اونم کردم ولی اصلا نتیجه نداد .
H:Shojaei
پنج شنبه 09 مرداد 1393, 19:01 عصر
سلام...
میتونید از SVG استفاده کنید واسه ایجاد هر شکلی نمونه:


<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

منبع یادگیری:
http://www.w3schools.com/svg/svg_reference.asp
دانیال دزفولی
پنج شنبه 09 مرداد 1393, 19:02 عصر
سلام...
میتونید از SVG استفاده کنید واسه ایجاد هر شکلی نمونه:


<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

منبع یادگیری:
http://www.w3schools.com/svg/svg_reference.asp

حالا ما اینو چطوری اونطوری کنیم !
vimax23
پنج شنبه 09 مرداد 1393, 19:14 عصر
دوستان از css3 و svg براتون مثال زدن
اما من پیشنهاد میکنم به شما از عکس استفاده کنین برای اینجور کارها تا تو مرورگرهای مختلف هم حجم کد بیاد پائین هم اینکه مرورگرها درست تفسیرش کنن
yasharhi
پنج شنبه 09 مرداد 1393, 19:16 عصر
من تصمیم گرفتم که همون عکس رو بزارم و متن رو روش بنویسم .این کار استاندارد هست ؟!
masoud_pnu
پنج شنبه 09 مرداد 1393, 19:30 عصر
Vimax23 درست میگه.اینجور چیزایی نمی ارزه بخاطرش انقد رو کد نویسی گیر بدین.معمولا منو رو باعکس درست میکنن.البته منوهای ساده رو.اون دوتاشکل بسازید تو فتوشاپ.اولی یه مستطیل ساده و دومی یه مستطیل که یه مثلث کوچک روشه.بافرمت pngذخیره اش کنید.هرکدوم نهایت300بایت حجمش میشه که کل منو نهایت میشه3کیلوبایت که اصلا خنده داره این حجم.براش بنویسید که در حالت عادی مستطیل اول و هنگام هاور مستطیل دوم نمایش داده بشه.خیلی ساده اس.انقدم گیر کدنویسی نمیشین.
qartalonline
پنج شنبه 09 مرداد 1393, 22:18 عصر
به لینک زیر سر بزنید هر شکلی که دوست داشتید با css3 درست کنید.
http://www.cssportal.com/css3-shapes/