رفتن به مطلب

قرار دادن عکس زمینه برای چند ضلعی ها


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

سلام این کد مربوط به یک شش ضلعی می باشد:


#hexagon {
width: 100px;
height: 55px;
background: #075c9d;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0; width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #075c9d;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #075c9d;
}

چطوری میتونم درون پس زمینه این شش ضلعی عکس قرار بدم؟؟

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


#hexagon {
width: 100px;
height: 55px;
background: url(images/pic.png);
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0; width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #075c9d;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #075c9d;
}

ویرایش شده توسط hami73
لینک به ارسال

با توجه به این که border دارای after,before می باشد باید تصویر مورد نظر 3 قسمتی در همه المنت ها ذکر شود تا قابل نمایش باشد

لینک به ارسال

با توجه به این که border دارای after,before می باشد باید تصویر مورد نظر 3 قسمتی در همه المنت ها ذکر شود تا قابل نمایش باشد

داداش ممنونم اما وقتی به before و after خاصیت background رو میدم قبول نمیکنه!

میشه راهنمایی کنید،من زیاد وارد نیستم.

لینک به ارسال

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

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

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

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

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

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

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

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

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