0

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 Pointer triangle I need to create

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

The view of the overlay

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

onmyway
  • 1,435
  • 3
  • 29
  • 53

1 Answers1

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>
f.overflow
  • 298
  • 1
  • 9