纯CSS完成闲聊框小尖角、气泡实际效果

2021-03-08 00:21 jianzhan

那末,用CSS如何完成这类实际效果呢?最先,来写1个简易的编码:


拷贝编码
编码以下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}</style>

这儿,大家能够获得1个黑色的正方形,实际上这是边框构成的,由于div的宽度和高宽比全是0,。那末,大家实际看来看,div宽度和高宽比全是0时,它的左右上下4边框全是如何的,下面大家把边框的各边色调各自设定为不一样色调:


拷贝编码
编码以下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
</style>

大家发现,原先当div的宽度和高宽比全是0的情况下,它的全部边框是由4个3角形构成的,每边为1个3角形,那末大家便可以运用这个特性,来做讨人喜欢的小尖角了。大家要是把不必须的3边的边框(3角形)的色调设定为与情况同样便可,这样就只能看到你要想的那个3角形了,随后再运用精准定位调剂1下部位便可以了。实际编码以下所示:


拷贝编码
编码以下:

<div class="send">
<div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948;
}

.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}

.send .arrow {
position:absolute;
top:5px;
right:⑴6px; /* 圆角的部位必须仔细调节哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

大获全胜,实际效果以下图: