时间戳

首页 > 解决方案 > 用 div 制作一个三角形并自定义其中的一部分

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

问题描述

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

我试过这样做：

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

这是我想要实现的目标：

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

我在这里想念什么？

标签： htmlcssangularsass

解决方案

你可以这样做：

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>

推荐阅读