رفتن به مطلب

ساخت انحنا با css


پست های پیشنهاد شده

سلام

من میخوام بدونم چطور میشه چنین انحنا هایی به شکل تصاویر زیر با css یا هر چیز دیگه درست کرد؟

نمونه آنلاین : همایش وردپرس

post-813-0-85859500-1438164618_thumb.png

post-813-0-36136600-1438164656_thumb.png

لینک به ارسال

به دو روش:

استفاده از عکس(منسوخ شده)

با استفاده از روش لایه ای (css) و کار با z-index ها...

بدین صورت که لایه پایینی z-index پایینتری داشته باشه... و برعکس

در این صورت لایه هایی که z-index بالاتری دارند بالاتر قرار میگیرند...

لینک به ارسال

به دو روش:

استفاده از عکس(منسوخ شده)

با استفاده از روش لایه ای (css) و کار با z-index ها...

بدین صورت که لایه پایینی z-index پایینتری داشته باشه... و برعکس

در این صورت لایه هایی که z-index بالاتری دارند بالاتر قرار میگیرند...

خب این مواردی که شما فرمودید میشه مرحله دوم کار

اول باید ببینم که اصلا چطور با css این کا رو انجام بدم

لینک به ارسال

حس کد زدن ندارم

ولی کلید کار رو میدم

دو لایه ایجاد میکنیم، اولین لایه، لایه بیس کار هست... لایه دوم لایه انحنا یا شکستگی لایه بیس هست...(من لایه شکستگی رو فقط میگم فعلا)

z-index لایه بیس رو 0 و z-index لایه دوم رو 1 میدیم...

لایه شماره دو متشکل از یک مستطیل هست که چرخانده شده...

البته باید موقعیت دهی در css رو خوب بلد باشید...

همین

لینک به ارسال

حس کد زدن ندارم

ولی کلید کار رو میدم

دو لایه ایجاد میکنیم، اولین لایه، لایه بیس کار هست... لایه دوم لایه انحنا یا شکستگی لایه بیس هست...(من لایه شکستگی رو فقط میگم فعلا)

z-index لایه بیس رو 0 و z-index لایه دوم رو 1 میدیم...

لایه شماره دو متشکل از یک مستطیل هست که چرخانده شده...

البته باید موقعیت دهی در css رو خوب بلد باشید...

همین

این دوستمون چقدر لقمه رو می پیچونه! :)

استفاده از عکس به هیچ وجه منسوخ نشده و همچنین عکسی کلا 5 کیلوبایت حجم داره(تو حالت گیف)

z-index هم که این آقا میگم طبیعیه که بعد از relative باید اعمال بشه

شما عکس رو بساز و لایه بیس رو انتخاب و رویی رو با عکس بپوشون

لینک به ارسال

دوستان ببینید من تونستم این کد رو پیدا کنم


.class {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 100px;
border: 50px solid #1abc9c;
border-top: 0 solid;
border-bottom: 35px solid rgba(0,0,0,0);
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateX(-180.76deg) rotateY(-180.51deg) scaleX(10) ;
transform: rotateX(-180.76deg) rotateY(-180.51deg) scaleX(10) ;
}

فقوط چون میخوام تو صفحه ریسپانسیو از استفاده کنم باید

به صورت اتوماتیک کش بیاد و مناسب صفحه بشه

ببینید اگر مشکلی داره بر طرف کنید بی زحمت

میخوام نهایتا به این نتیجه برسم

cxb4_infobottm.png

خیلییییی ممنون

لینک به ارسال

تو سایت همایش وردپرس از svg استفاده شده :


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="60" viewBox="0 0 100 102" preserveAspectRatio="none" class="svg-sep">
<path d="M0 0 L50 100 L100 0 Z"/>
</svg>

@morteza

لطفا راهنمایی کنید به همراه آموزش

ممنون

لینک به ارسال

سلام برای این کار دو تا راه هست یکی این که تو فتوشاپ این کارو بکنید و با فرمت gif سیو کنید دوم استفاده از یه خصیصه در css هستش به اسم border-radius که مقدارش هم اون قدریه که میخواین منحی داشته باشه مانند:

style="border-radius:25 25 25 25

[/

CODE]border-radius:25 25 25 25

البتهدومی برای باکسی ها کاربرد داره. (مانند div )

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...