আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে বর্ডারসহ ত্রিভুজ তৈরি করা যায় সিএসএস দিয়ে। এবার দেখাবো কিভাবে
সিএসএস৩ ব্যবহার করে খাজকাটা বর্ডার তৈরি করা যায়। তো চলুন কোডগুলো দেখে নিই-
<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 দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে।