css制作tips提示框，气泡框，制作三角形的实现

下面是关于"CSS制作Tips提示框，气泡框，制作三角形的实现"的完整攻略：

1. 制作气泡框

制作气泡框可使用伪类:before或:after，这些伪类可以在元素之前或之后插入一个内容生成器，因此可以用它来模拟气泡框的尖角，并添加其他的样式。

示例代码如下：

<div class="bubble">这是一个气泡框</div>

.bubble {
  position: relative;
  background-color: #fff;
  width: 200px;
  height: 100px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.bubble:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: 100%;
  left: 50%;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  transform: translateX(-50%);
}

上述代码中的关键点在于：

• 使用position: relative将元素相对定位；
• 使用position: absolute将伪类元素绝对定位，实现气泡框尖角的效果；
• 利用transform将伪类元素向左移动 50%。

2. 制作三角形

制作三角形可以使用边框的特性，根据边框特定的参数值实现。

示例代码如下：

<div class="triangle"></div>

.triangle {
  width: 0; 
  height: 0; 
  border-top: 50px solid transparent;
  border-right: 50px solid purple;
  border-bottom: 50px solid transparent;
}

上述代码中的关键点在于：

• 将元素的宽度和高度设为0；
• 利用border属性实现。

3. 制作提示框

制作提示框需要将以上两种方法结合起来进行实现。

示例代码如下：

<div class="tip">
    <div class="tip-content">
        这是一条提示信息！
        <span class="triangle"></span>
    </div>
</div>

.tip {
  position: relative;
  background-color: #f8f8f8;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  width: 200px;
}

.tip:before {
  content:'';
  display:block;
  position:absolute;
  width:10px;
  height:10px;
  left:15px;
  bottom:-5px;
  background-color:#f8f8f8;
  transform:rotate(45deg);
} 

.tip .tip-content {
  position: relative;
  z-index: 2;
}

.tip .triangle {
  position: absolute;
  top: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f8f8f8;
}

上述代码中的关键点在于：

• 利用伪类:before模拟提示框的阴影和小尖角；
• 利用条件选择器.tip .triangle创建一个div元素，使之显示为小三角形，并定位小三角形的位置；
• 利用position: relative实现提示框本身的定位。

至此，我们便完成了"CSS制作Tips提示框，气泡框，制作三角形的实现"的完整攻略。