如何在电子窗口上制作顶部箭头？答案

【问题标题】：How to make a top arrow on an Electron window?如何在电子窗口上制作顶部箭头？
【发布时间】：2016-11-12 22:05:54
【问题描述】：

我正在解决 Electron 的 Github 上的 Tray Window 问题，该问题展示了如何使窗口居中放置在托盘上。那里的一些屏幕截图显示了带有托盘窗口和指示托盘的顶部箭头的人，例如so。但我只得到类似this 的东西。这是代码（main.js）：

var ids = [];
const {BrowserWindow,app,Tray} = require('electron');
var trayIcon = null;
const TRAY_ARROW_HEIGHT = 50; //px
const WINDOW_WIDTH = 400;

app.on('ready', function() {

  const {screen} = require('electron')

  window = new BrowserWindow({
    width: WINDOW_WIDTH,
    height: 420,
    title: 'Hello World',
    resizable: true,
    frame: false,
    transparent: true,
    show: false
  });

  window.loadURL(`file://${__dirname}/main.html`);

  window.on('close', function () {
    window = null;
  });

  trayIcon = new Tray('tray.png');

  trayIcon.on('click', function() {

    var cursorPosition = screen.getCursorScreenPoint();

    window.setPosition(cursorPosition.x - WINDOW_WIDTH/2, TRAY_ARROW_HEIGHT);

    window.show();
    window.focus();

  });

  window.on('blur', function() {
    window.hide();
  })

});

还有main.html：

html class="arrow_box">
    <head>
        <style>
            .arrow_box {
                position: relative;
                background: #88b7d5;
                border: 4px solid #c2e1f5;
            }
            .arrow_box:after, .arrow_box:before {
                bottom: 100%;
                left: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }
            .arrow_box:after {
                border-color: rgba(136, 183, 213, 0);
                border-bottom-color: #88b7d5;
                border-width: 30px;
                margin-left: -30px;
            }
            .arrow_box:before {
                border-color: rgba(194, 225, 245, 0);
                border-bottom-color: #c2e1f5;
                border-width: 36px;
                margin-left: -36px;
            }
        </style>
    </head>
    <body>
        <div>This should have an arrow</div>
    </body>
</html>

【问题讨论】：

标签： css electron

【解决方案1】：

更改.arrow-box 的边框大小以匹配.arrow_box:after 中的border-width 将为您显示箭头。

.arrow_box { position: relative; background: #88b7d5; border: 30px solid #c2e1f5; }

【讨论】：