css khung ghi chú đẹp mắt không dùng hình nền

 Đôi khi muốn trang trí một đoạn ghi chú hoặc coment nào đó, ta thường nghĩ đến làm cho nó một hình nền.
Với thủ thuật css này, ta chỉ cần css không dùng hình nền vẫn có một khung ghi chú với border/ backgrounf chấp nhận được.

<style>
#gloss-triangle p{position:relative;background:#51C1FF;padding:15px}
#gloss-triangle p:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle p{position:relative;border-radius:50px;padding:10px;}
#gloss-circle p,#gloss-circle p:after,#gloss-circle p:before{border:5px solid #51C1FF;background:#fff}
#gloss-circle p:after{bottom:-20px;left:30px;width:20px;height:20px}
#gloss-circle p:before{bottom:-30px;left:60px;width:10px;height:10px}
#gloss-circle p:after,#gloss-circle p:before{content:"";position:absolute;border-radius:50%}  
#gloss-triangle1 p{position:relative;background:#51C1FF;padding:25px;height:50px;width:200px;border-radius:50%;line-height:}
#gloss-triangle1 p:after{content:"";position:absolute;bottom:-20px;left:50px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle1 p{position:relative; ;padding:10px;padding:25px;height:50px;width:200px;border-radius:50%;}
#gloss-circle1 p,#gloss-circle1 p:after,#gloss-circle1 p:before{background:#51C1FF}
#gloss-circle1 p:after{bottom:-15px;left:25px;width:50px;height:30px}
#gloss-circle1 p:before{bottom:-30px;left:60px;width:30px;height:20px}
#gloss-circle1 p:after,#gloss-circle1 p:before{content:"";position:absolute;border-radius:50%}  
</style>
<div id="gloss-triangle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông
</p>
</div>
<div id="gloss-circle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-triangle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-circle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>

Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

thaotrinh bendoi.vn