用CSS实现聊天对话框小三角效果

来源:csdn博客 分类: 文章浏览史 发布时间:2020-09-26 19:09:03 最后更新:2020-09-26 浏览:104
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-26 19:09:03

在这里插入图片描述

今天我教大家如何用css设计对话框的尖角效果。
对话框的结构:

1,左边的矩形和右边的三角形。
第一步,实现右边的三角形》

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
    div{
        display:block;
        width:0px;
        height:0px;
        border-top:25px solid blue;
        border-bottom:25px solid red;
        border-left:25px solid #ccc;
        border-right:25px solid green;
        background-color:green;
    }
</style>
</head><body>
    <div></div>
</body></html>

先设计一个div,让四周的border都具有一定大小和颜色

我们要的是最左边那个小三角形,那如何去掉其他的三角形呐?

把不需要的border颜色设置成透明色就行了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	div{
		display:block;
		width:0px;
		height:0px;
		border-top:25px solid rgba(0,0,0,0);
		border-bottom:25px solid rgba(0,0,0,0);
		border-left:25px solid #ccc;
		border-right:25px solid rgba(0,0,0,0);
		background-color:none;
	}
</style>
</head>

<body>
	<div></div>
</body>

</html>

在这里插入图片描述

这个小三角就设计完了,接下来我们来做对话框,
对话框就是普通的div样式设计:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	div
	.a{
		display:block
		width:60px;
		height:100px;
		border:2px solid #ccc;
		padding:12px;
		float:left;
	}
	.b{
		display:block;
		width:0px;
		height:0px;
		border-top:25px solid rgba(0,0,0,0);
		border-bottom:25px solid rgba(0,0,0,0);
		border-left:25px solid #ccc;
		border-right:25px solid rgba(0,0,0,0);
		background-color:none;
		margin-top:35px;
		float:left;
	}
</style>
</head>

<body>
	<div>
	<div class="a">666666666666666666666666666666666666</div>
	<div class="b"></div>
	</div>
</body>
</html>

效果如下图》
在这里插入图片描述
关于随鼠标移动的小三角代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #b {
            display: block;
            width: 0px;
            height: 0px;
            border-top: 25px solid rgba(0, 0, 0, 0);
            border-bottom: 25px solid rgba(0, 0, 0, 0);
            border-left: 25px solid #ccc;
            border-right: 25px solid rgba(0, 0, 0, 0);
            background-color: none;
            margin-top: 55px;
            float: left;
        }

        ul {
            float: left;
        }

        li {
            display: block;
            width: 300px;
            height: 100px;
            background-color: #cfc;
            border: 1px solid #ccc;
            margin-top: 10px;
            padding: 12px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>老铁666</li>
            <li>1433223</li>
            <li>SharingArk</li>
            <li>Chanke</li>
        </ul>
        <div id="b"></div>
    </div>
    <script>
        var ulLi = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
        var tran=document.getElementById('b');
        for (var i = 0; i < ulLi.length; i++) {
            ulLi[i].onmouseover = function () {
                for (var i = 0; i < ulLi.length; i++) {
                    if (ulLi[i] === this) {
                         tran.style.marginTop=ulLi[i].offsetTop+17+'px';
                    }
                }
            }
        }
    </script>
</body>

</html>

效果如下》》》
在这里插入图片描述

php技术微信