創建箭頭：在插入邊框半徑後

Question

我是我想創建一個指向頂部的箭頭。箭頭目前是一個基本的CSS僞裝類。但是，我的箭頭的左側和右側需要有某種「插入」邊框半徑。任何想法如何解決這一問題？

由於這涉及一個電子菜單欄應用程序，外部部分需要是透明的。

這是我現在想出了： https://jsfiddle.net/xcpo1g2y/

Answer 1

這也許是一個開始 - 但我使用一個額外的元素，感覺有點哈克。這個想法是通過在你想要的顏色中使用一個大的矩形來製作倒置的邊界半徑，並且你覆蓋用border-bottom-right-radius和border-bottom-left-radius設置的形狀覆蓋的邊緣。

我並沒有圍繞箭頭的頂部，但通過使用邊界半徑和旋轉變換方法，這當然是可能的。

body { 
 
    background: black; 
 
} 
 

 
.header { 
 
    background: rgba(235,238,243,1); 
 
    height: 40px; 
 
    width: 100%; 
 
    position: relative; 
 
    margin-top: 50px; 
 
} 
 

 
/* Left flange */ 
 
.header:before { 
 
    content: ""; 
 
    position: absolute; 
 
    background: none; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: 25px solid black; 
 
    border-bottom-right-radius: 25px; 
 
    transform: translateX(-137%); 
 
    z-index: 2; 
 
} 
 

 
/* Right flange */ 
 
.header:after { 
 
    content: ""; 
 
    position: absolute; 
 
    background: none; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: 25px solid black; 
 
    border-bottom-left-radius: 25px; 
 
    transform: translateX(37%); 
 
    z-index: 2; 
 
} 
 

 
/* Arrow base */ 
 
.header-helper { 
 
    background: white; 
 
    z-index: 1; 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: translateX(-50%); 
 
} 
 

 
/* Up arrow */ 
 
.header-helper:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border: 25px solid black; 
 
    border-bottom-color: transparent; 
 
    transform: translateX(-50%); 
 
    background: white; 
 
    margin-bottom: 8px; 
 
    z-index: 2; 
 
}

<div class="header"><div class='header-helper'></div></div>