用css实现三角形、聊天对话框

发表于 | 分类于

@TOC

# 前言 常见的聊天对话框，如微信，都是由一个长方形加一个三角形组合而成，重点就在于三角形的制作

一、css制作三角形的实现原理？

三角形的实现原理是元素宽高设置为0，再设置边框宽度、样式和颜色。

例如：
在这里插入图片描述

# 二、单个三角形
## 1.原理
只设置一条边的颜色，其他三边颜色设置为透明
例如：

  • 👇 向下三角
    在这里插入图片描述

  • 👉 向右三角
    在这里插入图片描述

    • 👆 向上三角
      在这里插入图片描述
  • 👈 向左三角
    在这里插入图片描述

2.空心三角形

只能看见边线，内部透明的三角形该如何用css实现呢

实现思路：使用css伪元素定位，用两个不同颜色、不同大小的实心三角形叠加，以达到“空心”的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="box"><div>

<style>
.box {
  width: 200px;
  height: 50px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  border: 1px solid red;
}
.box::before{
  position: absolute;
  top: 15px;
  left: 200px;
  content: '';
  border-width: 10px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: red;
}
.box::after {
  position: absolute;
  top: 15px;
  left: 198.5px;
  content: '';
  border-width: 10px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #fff;
}
</style>

在这里插入图片描述