时间:2021-05-08
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码:
复制代码代码如下:
<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}</style>
这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:
复制代码代码如下:
<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的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:
复制代码代码如下:
<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:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>
大功告成,效果如下图:
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一款基于纯CSS的气泡提示框,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向。在线预览源码下载实现的代码。css代码:CSSCode复制内容
页面设计需求,做了一个气泡形状的弹出框,效果如下:设计思路如下:1.使用Path绘制气泡的尖尖,将这个放到顶层;2.在用border绘制长方形框,将这个放到底层
那有没有办法弄一个既方便又兼容又友爱的Bubble气泡提示框呢?答案是可以的,而且就用纯CSS来来实现,当然在没出效果之前你有权去怀疑这件事情,但出了效果后,你
效果图(边框颜色太淡,放在{}里面):{}参考链接纯CSS气泡效果需要用到的知识点:当div的宽度和高度都是0时,整个边框是由四个三角形组成的,每一边为一个三角
用纯CSS3实现网页中常见的小箭头,实现代码如下所示:div.arrow-up{width:0px;height:0px;bor