矢印を次のように挿入します。挿入後の境界線の半径が

Question

です。上部を指す矢印を作成しようとしています。矢印は現在、基本的なCSS after疑似クラスです。しかし、私は矢印の左右にある種の「インセット」ボーダー半径が必要です。任意のアイデアをどのようにこれを修正するには？

これは電子製のメニューバーアプリに関するものなので、外側の部分は透明である必要があります。

これは私が現在、思い付いたものです： 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>