Текст внутри кругов, а также внутри их пересечения с html/css? ⇐ CSS

[Anonymous]

Я пытаюсь найти надежный способ представить это:


Пока у меня есть приведенный ниже код, но, как и ожидалось, текст 2 легко выйдет за пределы фигуры, поскольку он помещен в позицию: Absolute. Может ли кто-нибудь помочь мне придумать лучший подход? Буду бесконечно благодарен.

Код: Выделить всё

html{
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
}

#circles-container{
display: flex;
justify-content: center;
}

.circle{
height: 300px;
width: 300px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.circle > div{
width: 50%;
}

#circle-1 > div{
margin-right: 50%;
}

#circle-3 > div{
margin-left: 50%;
}

#circle-1{
background-color: #3a7487;
transform: translateX(25%)
}

#circle-3{
background-color: #9d4767;
transform: translateX(-25%);
mix-blend-mode: overlay;
}

#intersection{
position: absolute;
z-index: 2;
}

Код: Выделить всё

 Text 1 
Text 2 
Text 3 

Подробнее здесь: https://stackoverflow.com/questions/790 ... h-html-css