CSS重複円とテキストボックス

Question

私はCSSでこの効果を生み出すためにしようとしています。私は、三角形でボックスを作成してから、それをサークル上に重なるために負のマージンを使用してみましたが、それを正しく取得できません。

任意の助けに感謝。

Answer 1

フィドル

https://jsfiddle.net/Hastig/n3w0tztv/

上下中央に滞在し、円の高さはトリッキーであり、この例では働いていないのmin-heightテキストコンテナを持っているサークルを取得します。安価な修正は@mediaとブレークポイントで.containerからalign-items: centerを追加しています。

body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 0; 
 
    background-color: white; 
 
    height: 100vh; 
 
} 
 
.container { 
 
    display: flex; 
 
    width: 100%; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    position: relative; 
 
    display: flex; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-top: -4px; 
 
    margin-bottom: -4px; 
 
    margin-right: -17px; 
 
    background-color: #ec847c;; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-width: 4px; 
 
    border-radius: 100%; 
 
    z-index: 10; 
 
} 
 
.right { 
 
    position: relative; 
 
    display: flex; 
 
    flex: 2; 
 
    font-size: 20px; 
 
    color: white; 
 
    background-color: #4ca132; 
 
} 
 
.square { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: white; 
 
    overflow: hidden; 
 
} 
 
.square-top { top: 0; } 
 
.square-btm { bottom: 0; } 
 

 
.square::before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: rotate(45deg) scale(2); 
 
    background-color: #4ca132; 
 
    z-index: 1; 
 
} 
 

 
.square-top::before { top: 50%; left: 50%; } 
 
.square-btm::before { bottom: 50%; left: 50%; } 
 

 
.text { 
 
    position: relative; 
 
    z-index: 2; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    padding: 20px 20px 20px 40px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 

 
    </div> 
 
    <div class="right"> 
 
    <div class="square square-top"></div> 
 
    <div class="square square-btm"></div> 
 
    <div class="text"> 
 
Roles play an extremely important part in family funtion. 
 
    </div> 
 
    </div> 
 
</div>