用 div 制作一个三角形并自定义其中的一部分

Question

我正在尝试在div顶部创建一个指针(类似于工具提示(

我尝试这样做：

https://stackblitz.com/edit/angular-ivy-fa72tz

这是我想要实现的目标：

1. 我想制作旋转 45 的红色div 的顶部 度保持红色。
2. 红色div的下半部分使其透明。
3. 使红色div正好与黄色div的顶部边框相遇的一半。

我在这里错过了什么？

Answer 1

您可以使用一些 css 轻松地将div 创建为三角形，请查看以下内容 我从您提供的链接中对div 元素的 css 进行了一些更改：

.my-pointer[_ngcontent-wlg-c41] {
height: 0;
width: 0;
margin-left: 46px;
/* transform: rotate(-45deg); */
/* margin-bottom: -20px; */
opacity: 0.5;
/* background-color: Red; */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid red;
}

要增加三角形形状的大小，只需在上面的代码中增加左、右和底部的边框宽度。

你可以在这里阅读更多关于这个的信息，希望这是你想要的。

还要尝试包含一些代码和您的问题，以便更好地理解和回答。

Answer 2

你可以做这样的事情：

p {
font-family: Lato;
}
.my-pointer {
margin-left: 30px;
opacity: 0.5;
width: 0; 
height: 0; 
border-left: 30px solid transparent;
border-right: 30px solid transparent; 
border-bottom: 30px solid red;
}
.bottom-section {
height: 100px;
background-color: yellow;
}

<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div class="my-pointer"></div>
<div class="bottom-section">
Some Content Here
</div>

Answer 3

如果你想要尽可能少的 css来实现这一点，你可以通过使用z-index和position:relative在红色div上方显示黄色div

。

.red {
z-index: 1;
}
.yellow {
z-index: 2;
position: relative; 
}

Answer 4

尝试将.bottom-section位置设置为relative

.bottom-section {
height: 100px;
background-color: yellow;
position: relative;
}