آموزش ساخت لیست جهتدار و پیکان در CSS

آخرین مطالب

امکانات وب

آموزش ساخت لیست جهتدار و پیکان در CSS

گاهي اوقات لازم است برای نمايش محتوای يک منو يا يک باکس يک پیکان کوچک از وسط اضلاع مختلف آن به سمت محتوا طراحي کنیم. اين نوع طراحی بيشتر برای آيتم های منوهای آبشاری که دارای زير منو هستند در نظر گرفته می شود.

برای شروع با کد html زیر کار را آغاز می کنیم:

<div class="box"> Css arrow </div>

Css arrow

</div>

حال باید به آن استایل بدهیم. می خواهیم یک مثلث داخل باکس قرار دهیم. به مثلث position: absolute و باکس position: relative می دهیم. به این خاطر که می خواهیم موقعیت مثلث را روی باکس تنظیم کنیم. استایل ها را به صورت زیر به آن می دهیم:

.box { position: relative; background-color: aqua; padding: 40px; text-align: center; color: white; font-size: 40px; width: 200px; height: 100px; margin: 10% 40%; }

.box { position: relative;

background-color: aqua;

padding: 40px;

text-align: center;

color: white;

font-size: 40px;

width: 200px;

height: 100px;

margin: 10% 40%; }

استایل زبر را برای مثلث می نویسیم:

.box:after { bottom: 100%; left: 50%; position: absolute; width: 0; height: 0; border: 50px solid transparent; margin-left: -50px; border-bottom-color: aqua; content: ""; }

.box:after {

bottom: 100%;

left: 50%;

position: absolute;

width: 0;

height: 0;

border: 50px solid transparent;

margin-left: -50px;

border-bottom-color: aqua;

content: ""; }

کار تمام است و جهت در بالای باکس قرار می گیرد. پردیس وردپرس...

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

برچسب : آموزش,ساخت,لیست,جهتدار,پیکان, نویسنده : خنج pardiswp بازدید : 218 تاريخ : شنبه 28 مرداد 1396 ساعت: 16:34

آموزش ساخت لیست جهتدار و پیکان در CSS

آخرین مطالب

امکانات وب

آموزش ساخت لیست جهتدار و پیکان در CSS

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه