需求描述
编写web聊天工具时,聊天的样式一般会有一个三角形或者小尾巴,这时有2种解决方案,一是采用图片格式,另一种采用css实现。这里介绍css的实现方式。
尾巴样式实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
margin: 300px 300px;
}
.top {
width: 224px;
height: 200px;
position: absolute;
top: -101px;
left: 38px;
border-top-left-radius: 300px 200px;
background-color: #fff;
border-left: 1px solid red;
transform: rotate(-138deg);
-webkit-transform: rotate(-138deg);
-ms-transform: rotate(-138deg);
-moz-transform: rotate(-138deg);
-o-transform: rotate(-138deg);
z-index: 9;
}
.bottom {
width: 300px;
height: 200px;
position: absolute;
border-bottom-left-radius: 300px 200px;
background-color: pink;
border-bottom: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<span class="top"></span>
<span class="bottom"></span>
</div>
</body>
</html>
效果图:
由图中可以看到在左边尖端的线条颜色变浅,不过等比例缩小后不明显。因为样式中使用了transform,所以要使用兼容写法,只能支持IE9以上。
三角形样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.arrow{
display: inline-block;
border-top: 200px solid black;
border-left: 100px solid pink;
border-right: 50px solid blue;
}
</style>
</head>
<body>
<span class="arrow"></span>
</body>
</html>
效果图:
需要箭头朝哪个方向的三角形就设置那个方向以及它两边的border。比如例子中需要黑色的朝下的箭头就设置border-top以及两边的border-left、border-right。将两边的颜色设置为transparent就可以隐藏掉颜色,调整border宽度可以设置大小形状。