オーバーフロー：隠し属性が擬似クラスの前後に作用しない

Question

基本的には、六角形を作成しようとしています。六角形の中に円があり、円の余分な部分が隠されているはずです。 デモ：https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100

マイHTML：

<div class="container"> 
    <div class="radius-rect"></div> 
    <div class="hex"> 
    <div id="hexagon" > 
     <div class="semi-cir" ></div> 
    </div> 
    </div> 
</div> 

マイCSS：

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: #0088CD; 
    position: absolute; 
    border-top: 1px solid #0088CD; 
    border-bottom: 1px solid #0088CD; 
    border-radius: 2px; 

} 
#hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid #0088CD; 
    border-radius: 2px; 

} 
#hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid #0088CD; 
    border-radius: 2px; 
} 
.semi-cir{ 
    position: relative; 
    left: 10px; 
    background-color:#00A9F1; 
    height:100px; 
    width:100px; 
    -webkit-border-radius:75px; 
    -moz-border-radius:75px; 
    z-index: 1; 
    overflow: hidden; 
} 

オーバーフロー：隠された任意の効果を持っていません。

Answer 1

は、MDNによりdefinition of the overflowプロパティを見る

をオーバーフローCSSプロパティは、コンテンツをクリップするかどうかを指定し表示するスクロールバー、または、そのブロックレベルのコンテナに対して大きすぎる場合オーバーフローコンテンツを表示します。

（...）隠さ

• ：必要に応じて、コンテンツは、コンテンツボックスに収まるようにクリップされます。スクロールバーはありません。

要素のコンテンツが切り取られます。 background、borderのようなプロパティは、要素の部分ですので、クリップされません。子画面（.semi-cir）を超える部分を隠すには、親（#hexagon）にoverflow: hiddenを適用する必要があります。

しかし、あなたが正確にレンダリングするものは何か分かりません。単にクラス名のような「半円」が必要な場合は、半分を隠すのに十分な大きさのoverflowの親に完全円をラップすることができます。

内にのように非線形の六角形がある場合は、上記の「円の部分」をいくつか積み重ねることができます。

しかし、これらのすべては明確に過度に設計されており、overflowはそのための適切なプロパティではありません。このユースケースのために作られたclipとclip-pathのプロパティを見てみることができます。

クリップのCSSプロパティは、要素のどの部分が表示されるかを定義します。 clipプロパティは絶対配置された要素、つまりposition：absoluteまたはposition：fixedの要素にのみ適用されます。

からhttps://developer.mozilla.org/en/docs/Web/CSS/clip

クリップパスCSSプロパティは、すなわちを表示するクリッピング領域を定義することにより、表示得ることから要素の部分を防ぎ、素子の特定の領域のみが表示されます。クリッピング領域は、インラインまたは外部SVGを参照するURL、またはcircle（）などのシェイプメソッドとして指定されたパスです。 clip-pathプロパティは、現在廃止予定のclipプロパティを置き換えます。

- ここhttps://developer.mozilla.org/en/docs/Web/CSS/clip-path

それについていくつかの素晴らしい記事です：

• https://css-tricks.com/clipping-masking-css/
• https://www.html5rocks.com/en/tutorials/masking/adobe/

しかし、ブラウザのサポートに注意してください。 clipは非推奨であり、clip-pathはnot supported by IE and Edgeです。

Answer 2

'semi-cir'と同じ背景色を指定してください。 ncodenこんにちは、私は純粋なCSS でhttp://www.commutatus.com/ロゴを作成したいが、問題があるhttps://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100

#hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: #0088CD; 
 
    position: absolute; 
 
    top:50px; 
 
    left:50px; 
 
    border-top: 1px solid #0088CD; 
 
    border-bottom: 1px solid #0088CD; 
 
    border-radius: 2px; 
 

 
} 
 
#hexagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-bottom: 25px solid #0088CD; 
 
    border-radius: 2px; 
 

 
} 
 
#hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid #0088CD; 
 
    border-radius: 2px; 
 
} 
 
.semi-cir{ 
 
    position: relative; 
 
    left: 10px; 
 
    background-color:#00A9F1; 
 
    height:100px; 
 
    width:100px; 
 
    -webkit-border-radius:75px; 
 
    -moz-border-radius:75px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
} 
 
.radius-rect{ 
 
    height:200px; 
 
    background:#00a9f1; 
 
}

<div class="container"> 
 
    <div class="radius-rect"></div> 
 
    <div class="hex"> 
 
    <div id="hexagon" > 
 
     <div class="semi-cir" ></div> 
 
    </div> 
 
    </div> 
 
</div>