使用插入边框半径后创建箭头：

Question

我正试图制作一个指向顶部的箭头。箭头目前是一个基本的CSS RewriteEngine On RewriteCond %{HTTP_HOST} ^prestige\.projects\.dev$ RewriteCond %{REQUEST_URI} !^/prestige/ RewriteRule (.*) /prestige/$1 伪类。但是，我的箭头的左侧和右侧需要有某种＆＃34;插入＆＃34;边界半径。任何想法如何解决这个问题？

由于这涉及Electron菜单应用，外部需要透明。

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

Answer 1

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

我没有围绕箭头的顶部，但通过使用边界半径和旋转变换方法肯定是可能的。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;