ژوپین

ایجاد فلش یا arrow با css

آموزشفرانت اند(اhtml-css-javascript)

در این آموزش به کمک css میتوانیم فلش یا arrow ایجاد کنید که بیشتر برای باکس های کامنت یا نظر استفاده میشوند.


.arrow_box {

position: relative;

background: #88b7d5;

border: 4px solid #c2e1f5;

}

.arrow_box:after, .arrow_box:before {

bottom: 100%;

left: 50%;

border: solid transparent;

content: "";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

}




.arrow_box:after {

border-color: rgba(136, 183, 213, 0);

border-bottom-color: #88b7d5;

border-width: 30px;

margin-left: -30px;

}

.arrow_box:before {

border-color: rgba(194, 225, 245, 0);

border-bottom-color: #c2e1f5;

border-width: 36px;

margin-left: -36px;

}


در کد بالا به جای .arrow-box می توانید کلاس بلاک خودتون را جای گزین کنید

البته در وب سایت زیر می توانید به صورت آنلاین هر نوع که خواستید بسازید

https://cssarrowplease.com/
ایجاد فلش یا arrow با css
نمایش 273
لایک 2
برچسب ها :
css html arrow css arrow arrowed box css فلش فلش با css

نظرات



ارسال نظر

جهت قرار دادن کد در متن کامنت ، متن مورد نظر را انتخاب کنید و دکمه بالا را بزنید

گفتگو با پشتیبان