使用 css 3 clip 手把手自己撸一个 tooltips 提示语

当前业务需求要使用 tooltips 提示语组件时，很多人第一时间是去找各种开源组件来使用，但其实实现一个提示语还是比较简单的，布局出来后自己可以自由封装，应用到各种场景，这里展示了一个完整的下三角布局的 tooltips 代码。当然，左三角、上三角、右三角的如法炮制。

废话不多说，先上 Demo

使用 css 3 clip 手把手自己撸一个 tooltips 提示语

html 代码，下面使用 BEM 风格 css 编写风格

<div class="popup">
	<div class="popup__body">
		<div class="popup__content">提示内容</div>
		<div class="popup__arrow-container">
			<div class="popup__arrow"></div>
		</div>
	</div>
</div>

css 代码，关键点是使用 clip 裁剪出三角形

.popup {
    background: #fff;
    z-index: 1100;
    display: inline-block;
    position: absolute;
    max-width: 384px;
    top: 50px;
    left: 179.8px;
    padding: 0;
    outline: 0;
}

.popup__body {
    border-color: #03a9f4;
    border-width: 1px;
    border-style: solid;
    position: relative;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .6);
    box-shadow: 0 0 12px rgba(0, 0, 0, .6);
    -webkit-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
}

.popup__content {
    width: 150px;
    padding: 10px;
    position: relative;
    word-break: break-all;
    white-space: normal;
    z-index: 1;
    text-align: center;
}

.popup__arrow {
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .6);
    box-shadow: 0 0 12px rgba(0, 0, 0, .6);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    width: 28.284271247px;
    height: 28.284271247px;
    border-width: 1px;
    border-style: solid;
    border-color: #03a9f4;
    left: -4.142135623px;
    top: -14.142135623px;
    background: #fff;
}

.popup__arrow-container {
    width: 20px;
    height: 20px;
    position: absolute;
    clip: rect(10px, 2000px, 1000px, -1000px); /* clip 裁剪出三角形 */
    bottom: -9.99px;
    z-index: 2;
    left: 75px;
}