باکس های کج [بایگانی]

imdeveloper

چهارشنبه 20 آبان 1394, 17:54 عصر

سلام
من دارم قالبی تک صفحه ای میزنم بعد پایین باکس ها میخوام کج باشه
اینکار رو با استفاده از کدهای سایت http://laratalks.com/ انجام دادم اما خب الان مشکلی که برای یه قسمت از سایت پیدا کردم این هستش که میخوام عکس بزارم اما نمیشه
مثل عکس زیر میخوام درست کنم :
136651

لطفا راهنمایی کنید

پیام حیاتی

پنج شنبه 21 آبان 1394, 11:50 صبح

- کدهاتون رو قرار بدید.
- عکس بزارید نمیشه یعنی چی؟مشکل با رویه هم قرار گفرتن لایه ها دارید یا... .

imdeveloper

پنج شنبه 21 آبان 1394, 12:34 عصر

عرض کردم که کدهای سایت http://laratalks.com/ رو استفاده کردم

imdeveloper

جمعه 22 آبان 1394, 11:02 صبح

UP..............

anvar

جمعه 22 آبان 1394, 13:55 عصر

از Clip path استفاده کن (البته در همه مرورگرها استفاده نمی شه)
http://sarasoueidan.com/blog/css-svg-clipping/

imdeveloper

جمعه 22 آبان 1394, 22:06 عصر

راه دیگه ای نداره که همه مرورگر ها کار کنه؟

imdeveloper

یک شنبه 24 آبان 1394, 20:37 عصر

راه دیگه ای نداره که همه مرورگر ها کار کنه؟

anvar

یک شنبه 24 آبان 1394, 22:35 عصر

راه دومش استفاده از shape های css3 هست اما ممکنه برای تصاویر جواب نده (اگر از رنگ زمینه خالی استفاده می کنی میشه این کار رو کرد مثل سایت اشاره شده در بالا اما اگر از تصاویر استفاده کنی (مثل عکس بالا) این روش جوابگو نیست)

بعنوان مثال در لینکی که در پست بالا گذاشتم میشه تگ svg رو حذف کرد و به جای آن یک div قرار داد و استایل زیر را به آن داد
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 100px solid #FAFAFA;
background-color: #F3F2EF;

در قواعد بالا border-top همون بخضی میشه که شما تصویر قرار م یدهید و background-color رنگ دو طرف راس رو به پائین است که شفاف به نظر می رسه تا با باکس پائین هم رنگ شود