সিএসএস দিয়ে খাজকাটা বর্ডার তৈরি করবেন যেভাবে।

আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে  বর্ডারসহ ত্রিভুজ তৈরি করা যায় সিএসএস দিয়ে। এবার দেখাবো কিভাবে
সিএসএস৩ ব্যবহার করে খাজকাটা বর্ডার তৈরি করা যায়। তো চলুন কোডগুলো দেখে নিই-
<html><head><style>

.header{
color:white;
background-color:#2B3A48;
text-align:center;
}

.header:after {
content: ” “;
display:block;
position: relative;
top:0px;left:0px;
width:100%;
height:36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
</style></head><body>
<div class=”header”><h1>This is a header</h1></div>
</body></html>

কোডগুলো কপি করে নোটপ্যাডে নিয়ে header.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে।

নিলুফার ইয়াসমিন

লেখিকা নিলুফার ইয়াসমিন সম্মান ৪র্থ বর্ষের শিক্ষার্থী। ইংরেজীতে ব্লগিং এর মাধ্যমে ব্লগিং হাতেকড়ি। বাংলা ব্লগেও তিনি বেশ কিছু তথ্যপূর্ণ পোস্ট লিখেন। বর্তমানে তিনি টিউটোহোস্টের সাপোর্ট ম্যানেজার পদে কর্মরত আছেন। 

Tags:


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

Leave a Reply