如何使用纯css和html将三角形作为指针添加到html元素上[重复]答案

【问题标题】：How add a triangle as a pointer onto an html element using pure css and html [duplicate]如何使用纯css和html将三角形作为指针添加到html元素上[重复]
【发布时间】：2020-04-19 15:06:50
【问题描述】：

我正在尝试使用 html 和 css 制作工具提示。工具提示将是一个在左侧或右侧具有三角形的矩形。下面是一个视觉示例（我不关心颜色或阴影，只是出现了三角形。

虽然我已经成功地使用以下方法制作了一个三角形：

    #triangle-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
    }

当我尝试使用伪元素将其附加到 div 时，没有任何反应。例如，我尝试过：

.triangleTest {
  height: 100px;
  width: 100px;
}

.triangleTest:after {
    width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
}

<div class="triangleTest"></div>

但没有什么期望方形 div 出现在屏幕上。如何创建向图像中的 div 添加三角形？

【问题讨论】：

标签： html css

【解决方案1】：

.triangleTest {
	position: relative;
	background: lightgray;
	border-radius: .4em;
  height: 100px;
  width: 100px;
  text-align: center;
}
.triangleTest h1 {
padding-top: 25px;
}
.triangleTest:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 0.563em solid transparent;
	border-right-color: lightgray;
	border-left: 0;
	margin-top: -0.562em;
	margin-left: -0.562em;
}

<div class="triangleTest">
<h1>Hello</h1>
</div>

【讨论】：