ช่องแสดงความคิดเห็นสามารถสร้างได้โดยใช้คุณสมบัติ clip-path
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ 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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
