クリップパスで示された線を高解像度で削除する方法

Question

クリップパスを作成して、下向きの矢印の後ろにある画像の一部をマスクしてから、この細い線を高解像度の画面に表示します。通常の画面。

.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%); 

margin-bottomとmargin-topだけの要素に間隔を追加します。ここ

はクリップパスのCSSです。私はpaddingで遊んでみましたが、役に立たなかった。

すべてのヘルプは高く評価されます。 ありがとう

Answer 1

clip-path（必須ではない場合）を使用する代わりに、この1つを試すことができます。

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>