寫個訊息框容易太容易了,網上一搜就一大堆教程。直接拷貝貼上到自己專案就可以啦。大多是用::after或者::before實現三角形,絕對定位移動到邊上成為訊息框的角角。
但是如果要我們實現背景色是透明的訊息框,如下:
似乎常用的訊息框寫法這種操作是實現不了的。
難點一
用常用的方式實現的訊息框,想要改成透明背景,似乎不太可能。
因為如果訊息框有邊框的話,訊息框的角通常是用::after 與 ::before 做成三角形,然後一大點的三角形與小一點的三角形重疊而成,如果我們想要把訊息框的角變成透明的,總會透到後面作為是模擬邊框的三角形的顏色。
(如上圖我把作為背景三角形設定了 opacity: .5 透的是作為邊框的顏色,兩個顏色混合在了一起)
難點二
還有一個問題就是訊息框的角透明會透到訊息框的邊框線。
如何實現
好了,接下來說說我是如何實現的。
訊息框的角還有另一種實現方法就是就是寫個小正方形旋轉45度。
然後給正方形上邊和右邊邊框
然後再給個透明背景色 background: hsla(0, 0, 0, 0);
好了一個可以透明到背景的角實現了我們再來解決難題二。
想寫個訊息框的主體
好,然後用主體div的::after 和 ::before 實現左邊和右邊的邊框,中間隔開要放三角形的位置
然後給主體div設定下邊框
哈哈 是不是解決了難題二。
最終效果
調下絕對定位的位置,調下z-index。
好了接下啦,鎧甲合體!!!
詳細程式碼
<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;
}
}
複製程式碼
結語
不知道各位朋友再實際工作會不會用到這種樣式。本文只是想分享一下解決思路,如果大家有更好的解決方案希望與我分享,謝謝喲。