خط کج در css

- 8 ماه پیش
توسط EW آپدیت شد
mohammad.b ( 560 تجربه )
8 ماه پیش

سلام دوستان
اول از همه بابت عنوان بد معذرت میخوام چون واقعا نمیدونستم چی بنویسم
به عکس زیر یه نگاه بندازید
http://s9.picofile.com/file/8322608184/a.png
همونطور که میبینید قسمت پایین هدر بصورت یه مستطیل معمولی نیست و کج شدست خواستم ببینم اینارو چطوری میسازن کلن اسم این نوع طراحی چی هست
با html&css خالی میسازن یا با جاوااسکریپت
یه توضیح کوچیک هک بدین ممنون میشم خودم پیگیر میشم یادش میگیرم ولی متاسفانه الان حتی اسمش رو هم نمیدونم
با تشکر

امیر اردکانی ( 866 تجربه )
8 ماه پیش

سلام
هم با css هم با svg میتونید این طرح رو پیاده کنید , لینک های زیر رو بررسی کنید بهتون کمک میکنه

لینک 1
لینک 2

علیرضا اصلانی ( 7114 تجربه )
8 ماه پیش

سلام فکر کنم اسمش skew باشه
https://codepen.io/MKasio/pen/kEypt

EW ( 3645 تجربه )
8 ماه پیش

بسیار سادس شما به کد زیر نگاه کنید اول تا من توضیح بدم :
https://jsfiddle.net/yfardtjt/3/
دو تا div ساختم بعد بهشون استایل دادم نکته اصلیش اینه که به یه طرف

transform: skewY(20deg);  

و به یه طرف مقابلش

transform: skewY(-20deg);

دادم یه کد رو کپی کنید با skewY ور برید متوجه میشید برای فهم بیشتر میتونید به لینک زیر هم مراجعه کنید
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform

احسان ( 716 تجربه )
8 ماه پیش

سلام اگه منظورتون مثلثها هست که میتونی از سایت استفاده کنی خیلی راحته.
http://apps.eky.hk/css-triangle-generator/

برای ارسال پاسخ باید وارد سایت شوید