How to remove a line shown by clip paths on high resolutions

Question

After creating a clip path to mask away a part of an image leaving behind a downward pointing arrow, I get this thin line on high resolution screens or when i zoom in on a regular screen.

here is the css for the clip path:

.clearflowptr {
    margin-bottom: 40px;
    margin-top: 40px;
    background: white;
    height: 50px;
    width: 100%;
    -webkit-clip-path: polygon(0 0, 46% 0, 50% 100%, 54% 0, 100% 0, 100% 100%, 0 100%);

the margin-bottom and margin-top just add spacing to the element. I tried playing around with the padding but to no avail.

Any help is appreciated. Thanks

Answer 1

You can try this one instead of using clip-path if its not a requirement.

div{
  background-color: #0b8192;
  width: 100%;
  height: 15px;
  position: relative;
}

div:after{
  content: '';
  width: 0px;
  height: 0px;
  border: 40px solid #0b8192;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  border-right-color:transparent;
  border-left-color:transparent;
  border-bottom-color:transparent;
}

<div>

</div>