CSSに曲がった三角形の円弧を作成

Question

それはCSSで曲がったアーク三角形のようなものを作成することは可能ですか？ （青い部分を見てください）。

このエフェクトは、白い1つの楕円形のdivと青の上に置かれた別のdivで作成することができるので、弧の錯覚を与えます。しかし、白い部分が白い楕円で覆われているのとは対照的に、私は弧があるところで透明性が必要なので、これはいいことではありません。

全体を作成するために、隣り合わせに設定できる全体または半分を作成したいと思います。

Answer 1

親の幅と定義済みの高さを持つ擬似要素を追加できます。

この場合、ボーダー半径を50％に設定すると楕円形になり、上に行くと影が追加され、形状が得られます。

基本要素は、長方形のSVGグラフィックを使用する方法について

div { 
 
    background-image: linear-gradient(black, black); 
 
    background-size: 100% 30px; 
 
    background-repeat: no-repeat; 
 
    height: 30px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-bottom: 80px; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    height: 160px; 
 
    width: 100%; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    box-shadow: 0px -80px 0px 100px blue; 
 
    top: 30px; 
 
    z-index: -1; 
 
}

<div></div>

Answer 2

あなたは擬似要素にボーダートップ半径を適用することによって、これを達成することができます：私は2つのSVGsでこれを行うことをお勧めします

div { 
 
    background: blue; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    display: block; 
 
    background: white; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    height: 75px; 
 
}

<div></div>

Answer 3

。そうすれば、あなたはストレッチを経験しません。その後、ページの両側に配置します。それから、彼らはそれに応じて伸びるべきです。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="360px" height="288px" viewBox="0 0 360 288" style="enable-background:new 0 0 360 288;"> 
    <style type="text/css"> 
    .st0{fill:#03B3DB;} 
    </style> 
    <path class="st0" d="M91.7,109.1V78.6h190c0,0-38-0.4-104.9,7.4C117.7,92.9,91.7,109.1,91.7,109.1z"/> 
</svg>