ক্লিপ-পাথ প্রপার্টি
ব্যবহার করে কমেন্ট বক্স তৈরি করা যেতে পারেসিনট্যাক্স
CSS ক্লিপ-পাথ সম্পত্তির সিনট্যাক্স নিম্নরূপ -
Selector {
clip-path: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি দেখায় কিভাবে আমরা CSS ব্যবহার করে একটি মন্তব্য বক্স তৈরি করতে পারি।
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 2%;
border-radius: 8%;
width:25%;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
left: 80%;
}
#one {
box-shadow: inset 0 0 12px green;
left: 65%;
}
#two {
box-shadow: inset 0 0 12px blue;
left: 4%;
}
#one::after {
left: 80%;
box-shadow: inset 0 0 12px green;
clip-path: polygon(0 0, 100% 0, 100% 80%);
}
#two::after{
left: 8%;
box-shadow: inset 0 0 12px blue;
clip-path: polygon(0 0, 100% 0, 0 80%);
}
</style>
</head>
<body>
<div class="cb" id="one">
Demo Comment 1
</div>
<div class="cb" id="two">
Demo Comment 2
</div>
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.cb {
position: relative;
padding: 2%;
border-radius: 8%;
width:15%;
box-shadow: inset 0 0 12px orange;
}
.cb::after {
content: "";
position: absolute;
height: 30px;
width: 30px;
bottom: -30px;
left: 80%;
box-shadow: inset 0 0 12px orange;
}
#one {
left: 65%;
}
#one::after {
left: 10%;
clip-path: polygon(0 0, 100% 0, 0 80%);
}
span{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="cb" id="one">
accumsan
</div>
<p>
Aenean tempor lobortis porttitor. Nulla erat purus, commodo <span>accumsan</span> viverra id, sollicitudin eget dui. Curabitur mollis scelerisque quam, vitae dictum diam dictum in. Aenean fermentum efficitur suscipit. Donec non ligula purus.
</p>
</body>
</html> এটি নিম্নলিখিত আউটপুট দেয়
