html - 如何创建三 Angular 形并将其用作工具提示中的箭头

Question

我想使用 html 和 CSS 制作一些自定义工具提示。我遇到的主要问题是箭头样式。

结果或多或少符合我的要求，但我不敢相信我需要逐个像素地设置这些值，例如:右、上等。也许有更优雅的方法来做到这一点？

body {
  background: #de302f;
}

.container {
  position: relative;
  max-width: 600px;
  height: auto;
  border: 2px solid #ffffff;
  margin: 10px auto;
  padding: 30px;
  box-sizing: border-box;
}

.item {
  position: absolute;
  width: 50px;
  height: 50px;
  border-bottom: 2px solid #ffffff;
  top: 100%;
  right: -26.9px;
  transform: rotate(45deg);
  margin-top: -25px;
  background: #de302f;
}

.container:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 73px;
  border-left: 2px solid #ffffff;
  top: 24px;
  right: -52px;
}

<div class="container">
  <div class="item">
  </div>
</div>

Answer 1

您可以像下面这样简化一下:

body {
  background: #de302f;
}

.container {
  --t: 2px; /* thickness */
  --b: var(--t) solid #fff; /* border here */
  
  position: relative;
  max-width: 600px;
  height: 50px;
  border: var(--b);
  border-bottom: none;
  margin: 10px auto;
  padding: 30px;
  box-sizing: border-box;
  clip-path: inset(0 0 -100vmax);
}
.container:before,
.container:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 40px; /* control the height here */
  right: calc(-1*var(--t));
  border-right: var(--b);
}
.container:after {
  width: 100%;
  border-top: var(--b);
  transform: skewX(30deg); /* control the angle here */
  transform-origin: 0 calc(100% - var(--t));
}

<div class="container">

</div>