How create a triangular "pointer" in the middle of an HTML view using HTML and CSS

Question

I am not sure how to best tackle this, and would appreciate any input.

What I need to accomplish:

I have a layout/design request, with a triangular "pointer" in the middle - centered horizontally on/in an HTML view, pointing to the App name and Icon. It is for an overlay on top of a darker background.

Please see images for reference:

The image above shows the triangular pointer I need to create.

The Image above shows a view of the background and the overlay.

Answer 1

Nevertheless:

use the infromation you got about the triangle and then just center the triangle div.

.triangle {
    border-color: transparent transparent white transparent;
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    height: 0px;
    width: 0px;
    display: inline-block;
}

.container {
  width: 350px;
  height: 40px;
  background: gray;
  text-align: center;
}

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