寫個消息框容易太容易了，網上一搜就一大堆教程。直接拷貝粘貼到自己項目就可以啦。大多是用::after或者::before實現三角形，絕對定位移動到邊上成為消息框的角角。
但是如果要我們實現背景色是透明的消息框，如下：
似乎常用的消息框寫法這種操作是實現不了的。
難點一
用常用的方式實現的消息框，想要改成透明背景，似乎不太可能。
因為如果消息框有邊框的話，消息框的角通常是用::after 與 ::before 做成三角形，然后一大點的三角形與小一點的三角形重疊而成，如果我們想要把消息框的角變成透明的，總會透到后面作為是模擬邊框的三角形的顏色。
(如上圖我把作為背景三角形設置了 opacity: .5 透的是作為邊框的顏色，兩個顏色混合在了一起)
難點二
還有一個問題就是消息框的角透明會透到消息框的邊框線。
如何實現
好了，接下來說說我是如何實現的。
消息框的角還有另一種實現方法就是就是寫個小正方形旋轉45度。
然后給正方形上邊和右邊邊框
然后再給個透明背景色 background: hsla(0, 0, 0, 0);
好了一個可以透明到背景的角實現了我們再來解決難題二。
想寫個消息框的主體
好，然后用主體div的::after 和 ::before 實現左邊和右邊的邊框，中間隔開要放三角形的位置
然后給主體div設置下邊框
哈哈 是不是解決了難題二。
最終效果
調下絕對定位的位置，調下z-index。
好了接下啦，鎧甲合體！?。?/p>
詳細代碼
<div class="warp" > <div class="box" > <div class="horn" ></div> <div class="content">低調哥挺帥</div> </div></div>.warp{ margin: auto; width: 75%; height: 100vh; z-index: 1; position: relative;}.box{ overflow: hidden; .horn{ right: .75rem; top: .18rem; position: absolute; transform: rotate(45deg); width: .25rem; height: .25rem; border-width: 0.02rem 0rem 0rem 0.02rem; border-style: solid; border-color:#fff; background: #000; background: hsla(0, 0, 0, 0); } .content{ display: none; position: relative; margin: .3rem 0 .25rem 0; width: auto; float: right; padding: .1rem .3rem; font-size: .3rem; color: #fff; background: hsla(0, 0, 0, .0); letter-spacing: .05rem; border-bottom: .02rem solid #fff; border-radius:.35rem; &::after{ content:''; position: absolute; width: 1.305rem; height: 103%; top:0; left: 0; border-width: 0.02rem .0rem .02rem .02rem; border-style: solid; border-color: #fff; border-radius: .35rem .0rem 0 .35rem; } &::before{ content:''; position: absolute; width: .71rem; height: 103%; top:0; right:0; border-width: 0.02rem .02rem .02rem .0rem; border-style: solid; border-color: #fff; border-radius: 0 .35rem .35rem 0; } }總結
以上所述是小編給大家介紹的CSS 制作帶邊框背景色透明的消息框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
