طراحی این شکل با Css

[mahdivita]

سلام
میخوام شکل روبه رو رو با Css درست کنم اما بلد نیستم
لطفا اگر کسی بلده بگه
http://up.i90.ir/uploads/1404180659.jpg

[2undercover]

میشه با CSS3 درستش کرد، اما کمی پیشچیده میشه و Responsive هم در نمیاد:

http://codepen.io/2undercover/pen/AKeFz

[omidparkour]

خب اگر عکس هم بزارم باز هم responsive نمیشه کرد

[alishutter]

خب میتونید از عکس استفاده کنین!!!

[mahdivita]

سلام
من شکل رو با کد های زیر کشیدم اما مشکلم اینه که اون ناحیه ی قرمز توی عکس رو چی کنم؟؟http://up.i90.ir/uploads/1404233371.jpg

<div id="end-post-forum"> <div class="end-post-title1">آخرین ارسال های انجمن</div><div class="end-post-title2"></div><div class="end-post-title3"></div></div><div id="end-post-content"></div><!-----
#end-post-forum{ position: relative;
width: 450px;
margin-left:50px;
margin-top:-415px;
color: #fff;
text-align: center;
float:left;
}
.end-post-title1,
.end-post-title2,
.end-post-title3 {
position: absolute;
height: 32px;
background-color: #3e000d;
}
.end-post-title1 {
top: 0;
right: -150px;
width: 270px;
line-height: 32px;
border-radius: 0 3px 3px 0;
}
.end-post-title2 {
top: 17px;
right: 106px;
width: 76px;
height: 30px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.end-post-title3 {
top: 32px;
left: 10px;
width: 270px;
border-radius: 3px 0 0 3px;
}
#end-post-content{
Border-radius:0px 0px 5px 5px;
height:400px;
width:580px;
float:left;
margin-left:65px;
margin-top:-400px;
background-color:#a60728;
}

[حمید . ه]

مشکل شما با SVG حل میشه
در مورد رسپانسیو بودن هم باید بگم که شما میتونید کد های SVG رو با جاوااسکریپت تغییر بدید بنابر این میتونید شکلتون رو در ابعاد خاص تغییر بدید.
پس در مورد رسم اشکال از طریق SVG جست و جو کنید.

پ.ن : به دنبال منابع فارسی نباشید
موفق باشید

[حمید . ه]

برای نمونه : http://css-tricks.com
منوی اصلیه این سایت با SVG نوشته شده که میتونید با تغییر سایز مرورگر تغییر منو ها رو هم مشاهده کنید
ضمنا برای یادگیری ترفند های CSS هم سایت جامع و خوبیه

[mahdivita]

من راجبه Svg جستجو کردم اما به نتیجه خاصی نرسیدم که چجوری با svg اینکار رو بکنم
لطفا اگر امکانش هست این رو برام اوکی کنید
ممنون

[ab.ali]

خب می تونید توی photoshop بسازید و یک راست بیارین توی سایتتون. خیلی راحت تره و اینجوری حجم کداتون بالا نمی ره ولی باید مراقب حجم عکس هم باشید!

[omidparkour]

اونجوری از نظر کد نویسی مشکلی نداره؟

[ab.ali]

اونجوری از نظر کد نویسی مشکلی نداره؟

از لحاظ هایی مشکل داره، مثلا ارتفاع auto نمی تونین بهش بدین و به طور کلی داینامیک نیست ولی می تونین ازش به عنوان منو و خیلی چیز ها استفاده کرد ، مثلا مطالب جدید و پربازدید و ... ولی میگم داینامیک نیست.(اگر منظورتون همین بود)

[mahdivita]

یعنی واقعا با css نمیشه اوکیش کرد
فقط یه ذره اون ناحیه قرمز پاک بشه اوکی میشه دیگه

[mohamad_torabi]

این کار به نظرم هم ساده است هم استاندارد
سه لایه ایجاد کنید یکی بالا یکی وسط یکی پایین
حالا لایه پایین میشه یه مربع
لایه وسطی میشه یه ذوزنقه
لایه بالایی میشه همون تیتر که شکل خاصی داره
حالا باید کاری کنید که عرض و ارتفاع ذوزنقه برا تیتر یکی بشه
موفق باشید
ایده خوبی بود تشکر یادتون نره:قهقهه:

[mohamad_torabi]

راستی اگر در ترسیم لایه ها مشکل دارین اموزش زیر خوبه
http://www.learningbaz.ir/1392/11/11/css-shape/

[mahdivita]

با یه ترفند با همون Css اوکی شد
نگاه کنیدhttp://up.i90.ir/uploads/1404172541.jpg

[mohamad_torabi]

با یه ترفند با همون Css اوکی شد
نگاه کنیدhttp://up.i90.ir/uploads/1404172541.jpg

خوب شد
ایا پاسخ من بدردتون خورد؟

[mahdivita]

من اون اشکال رو تو سایت های خارجی زیادی دیده بودم و داخل بوک مارک هام بود
اما به هر حال ممنون

[mohamad_torabi]

من اون اشکال رو تو سایت های خارجی زیادی دیده بودم و داخل بوک مارک هام بود
اما به هر حال ممنون
خواهش میکنم فقط میخواستم بدونم ترفندتون چی بود؟:لبخند:

[ab.ali]

خواهش میکنم فقط میخواستم بدونم ترفندتون چی بود؟:لبخند:

اون قسمت اریب رو کوتاه تر کردن تا دو تا مستطیل افقی به هم نزدیک بشن ، بعد این قدر آوردنش بالا تا هم سمت چپ رو پوشش بده و هم سمت راست رو.