html - 在 :after with inset border radius 中创建箭头

Question

我正在尝试创建一个指向顶部的箭头。箭头目前是一个基本的 CSS after 伪类。但是，箭头的左侧和右侧需要有某种“插入”的边框半径。有什么解决办法吗？

由于这涉及到 Electron 菜单栏应用程序，因此外部部分需要是透明的。

这是我目前想出的: https://jsfiddle.net/xcpo1g2y/

Answer 1

这可能是一个开始 - 但我使用了一个额外的元素，感觉有点老套。这个想法是通过用一个你想要的颜色的大矩形来制作倒置的边框半径，然后用 border-bottom-right-radius 和 border- 覆盖形状覆盖的边缘bottom-left-radius 设置。

我没有把箭头的顶部弄圆，但是通过使用您的边界半径和旋转变换方法肯定可以做到这一点。

body {
  background: black;
}

.header {
  background: rgba(235,238,243,1);
  height: 40px;
  width: 100%;
  position: relative;
  margin-top: 50px;
}

/* Left flange */
.header:before {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-right-radius: 25px;
  transform: translateX(-137%);
  z-index: 2;
}

/* Right flange */
.header:after {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-left-radius: 25px;
  transform: translateX(37%);
  z-index: 2;
}

/* Arrow base */
.header-helper {
  background: white;
  z-index: 1;
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
}

/* Up arrow */
.header-helper:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 25px solid black;
  border-bottom-color: transparent;
  transform: translateX(-50%);
  background: white;
  margin-bottom: 8px;
  z-index: 2;
}

<div class="header"><div class='header-helper'></div></div>