CSS实现文字背景框加小三角形尖角(对话框/左右角)

此代码仅供参考

---

代码说明

在边框旁边添加小三角形，简单的对话框特效，主要是通过设置边框border的其他三边为透明(transparent)实现。可以用来作为公告栏等。

---

html代码(右角)

<style type="text/css"> #div1 { width:200px; background:#abc; position:relative; margin:0 0 10px 0; padding:3px 2px; color:green; line-height:1.2em; border:1px solid #D9534F; display:inline-block; text-align:justify; } .i1 { display:inline-block; width:0; height:0; line-height:0; border-width:8px; border-style:solid; border-color:transparent transparent transparent #D9534F; _border-color:#fff #fff #fff #D9534F; position:absolute; right:-16px; top:50%; margin-top:-8px; } </style> <div id="div1">我们目下的当务之急，是：一要生存，二要温饱，三要发展。我之所谓生存，并不是苟活；所谓温饱，并不是奢侈；所谓发展，也不是放纵。<span class="i1"></span></div>

---

代码演示

---

html代码(左右角)

<style type="text/css"> #div1 { width:200px; background:#abc; position:relative; margin:0 0 10px 0; padding:3px 2px; color:green; line-height:1.2em; border:2px solid #D9534F; display:inline-block; text-align:justify; } .i1 { display:inline-block; width:0; height:0; line-height:0; border-width:8px; border-style:solid; border-color:transparent #D9534F transparent transparent; _border-color:#fff #D9534F #fff #fff; position:absolute; left:-16px; top:50%; margin-top:-8px; } .i2 { display:inline-block; width:0; height:0; line-height:0; border-width:8px; border-style:solid; border-color:transparent transparent transparent #D9534F; _border-color:#fff #fff #fff #D9534F; position:absolute; right:-16px; top:50%; margin-top:-8px; } </style> <div id="div1"><span class="i1"></span>我们目下的当务之急，是：一要生存，二要温饱，三要发展。我之所谓生存，并不是苟活；所谓温饱，并不是奢侈；所谓发展，也不是放纵。<span class="i2"></span></div>

---

代码演示

---

---