Hộp nhận xét có thể được tạo bằng thuộc tính clip-path
Cú pháp
Cú pháp của thuộc tính clip-path CSS như sau -
Selector {
clip-path: /*value*/
} Ví dụ
Các ví dụ sau đây cho thấy cách chúng ta có thể tạo hộp nhận xét bằng 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> Điều này cho kết quả sau
Ví dụ
<!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> Điều này cho kết quả sau
