<分区>
html - 如何使用纯 css 和 html 将三 Angular 形作为指针添加到 html 元素上
我正在尝试使用 html 和 css 制作工具提示。工具提示将是一个矩形，左侧或右侧有一个三 Angular 形。下面是一个视觉示例(我不关心颜色或阴影，只关心三 Angular 形的出现。
虽然我使用以下方法成功制作了三 Angular 形:
#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 出现在屏幕上。我如何创建一个三 Angular 形添加到图像中的 div？
最佳答案
.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>关于html - 如何使用纯 css 和 html 将三 Angular 形作为指针添加到 html 元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59538118/