CSSBattle 15.81: Odoo Solution

Flexbox, pseudo-classes, pseudo-elements

target output

Approach

4 circles, each has an inner circle

1st circle has different background color

2nd circle has an additional piece to make it look like a "d"

Result: 100% match

Implementation

1<div class="container">
2  <div class="circle"></div>
3  <div class="circle"></div>
4  <div class="circle"></div>
5  <div class="circle"></div>
6</div>
7<style>
8  body {
9    background: #191919;
10  }
11  .container {
12    margin-top: 20px;
13    display: flex;
14    height: 100%;
15    justify-content: center;
16    align-items: center;
17  }
18  .container :not(:first-child) {
19    margin-left: 2px;
20  }
21  .circle {
22    position: relative;
23    width: 80px;
24    height: 80px;
25    background: #8f8f8f;
26    border-radius: 100%;
27  }
28  .circle:first-child {
29    background: #714b67;
30  }
31  .circle:before {
32    content: "";
33    position: absolute;
34    width: 40px;
35    height: 40px;
36    border-radius: 100%;
37    background: #191919;
38    top: 50%;
39    left: 50%;
40    transform: translate(-50%, -50%);
41  }
42  .circle:nth-child(2):after {
43    content: "";
44    position: absolute;
45    background: #8f8f8f;
46    width: 20px;
47    height: 60px;
48    right: 0;
49    top: -20px;
50    border-top-left-radius: 10px;
51    border-top-right-radius: 10px;
52  }
53</style>