css重疊的圓圈和文本框

Question

我想用CSS產生這種效果。我曾嘗試創建一個帶有三角形的框，然後使用負邊距將其重疊到圓上，但無法正確顯示。

非常感謝任何幫助。

Answer 1

撥弄

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

獲取圓圈留垂直居中，並具有文本容器最小高度圓的高度是棘手的且在此實例中沒有制定出。一個便宜的修補程序是在@media的斷點處添加align-items: center到.container。

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>