Draw overlapped ovals using CSS - html

Question

I want to design a shape as similar as the following image:
Here is my code:
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
margin-left: -30px;
}
<div class="oval">aaa</div>
I have problem with the shared part.

Answer 1

Using a combination of both pseudo-elements, :before & :after, the intended layout can be achieved, as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
* {
box-sizing: border-box;
font-family: arial;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.oval:before,
.oval:after {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
}
.oval:before {
content: "C";
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval:after {
content: "R";
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
/* Nested anchor tags */
.oval.nested-children:before,
.oval.nested-children:after {
display: none;
}
br + .oval.nested-children {
margin-left: 0px;
}
.oval a {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
z-index: 1;
}
.oval a:first-of-type {
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval a:last-of-type {
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<br><br>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
Essential Properties:
overflow: hidden declared on containing elements (.oval)
position: relative declared on containing elements (.oval)
position: absolute declared on pseudo-elements
Applicable border-radius properties declared on relevant
pseudo-elements
Reference:
Psuedo-elements:
A CSS pseudo-element is a keyword added to a selector that lets
you style a specific part of the selected element(s). For example,
::first-line can be used to change the font of the first line of a
paragraph.
::after (:after):
In CSS, ::after creates a pseudo-element that is the last
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.
::before (:before):
In CSS, ::before creates a pseudo-element that is the first
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.

Answer 2

.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
}
.shared {
margin-left: -30px;
}
.oval-title {
text-transform: uppercase;
text-align: center;
margin: 0px;
}
<div class="oval">
<p class="oval-title">bcr</p>
</div>
<div class="oval shared">
<p class="oval-title">bod</p>
</div>

Answer 3

Well, how much of the image do you want to emulate? How's this for a start?
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid #573;
border-radius: 100px / 50px;
text-align:center;
overflow:hidden;
position:relative;
font:16px/20px 'Arial', sans-serif;
}
.oval.special {
background:linear-gradient(to right, rgba(255,255,255,0) 30%, rgba(128,128,128,.2));
color:#573;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval::before {
position:absolute;
display:block;
border-radius: 50px 0 / 25px 0;
top:0; left:70px; width:100px; height:25px;
background:#573 linear-gradient(to right, #463, #683 30%); color: white;
font-size:.625em; line-height:31px;
content:'C';
text-align:center; text-indent:-70px;
}
.oval::after {
position:absolute;
display:block;
border-radius: 0 50px / 0 25px;
bottom:0; left:70px; width:100px; height:25px;
background:red linear-gradient(to right, #722, #A23 30%); color: white;
font-size:.625em; line-height:19px;
content:'R';
text-align:center; text-indent:-70px;
}
<div class="oval special">BCR</div><div class="oval special">BOD</div><div class="oval special">ASR</div><div class="oval special">EMV</div><div class="oval">STE</div><div class="oval">DVR</div><div class="oval">PVR</div>