純粋なCSSで 'ウィング'コーナートリックを作成

Question

この画像のようなコーナーを追加することはできますか？その効果が何であるかは分かりません。そうであれば、あなたのアプローチは何ですか？

更新： この質問は重複していると示唆していた人がいましたが、残念なことに、重複の解決策では「翼」が色で埋められていることを考慮していません。アウトラインを持つタブには効果的ですが、実際の塗りつぶしがあります。

この技術とは何ですか？

Answer 1

私のアプローチは、コーナーのヒントを追加して配置する:beforeと:after pseudoclassesを使用することです。

.box { 
 
    position: absolute; 
 
    background: gray; 
 
    width: 400px; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border-radius: 0 0 10px 10px; 
 
} 
 

 
em { 
 
    display: block; 
 
    font-style: italic; 
 
    font-size: 1.1em; 
 
    color: white; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    line-height: 2.2em; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    content: ''; 
 
    display: block; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid gray; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.box:before { 
 
    left: -6px; 
 
} 
 

 
.box:after { 
 
    right: -6px; 
 
}

<div class="box"> 
 
    <em>Benefits Included In Members Savings Package</em> 
 
</div>