Making tomb shape. How do I make it?

Question

I want to put the text club members inside the following shape.

What I have been trying to do is to just give left and right margin and somehow make the above shape.

But I have no clue how can I get the tomb shape with left and right lines.

Answer 1

Here is some code to produce almost what you want. Feel free to build off of it.

CSS

.my-icon {
    position: relative;
    display: inline-block;
    width: 10em;
    height: 6em;
    border: .5em solid blue;
    top: 2em;
    text-align: center;
    padding-top: 1em;
    font-family: sans-serif;
    text-transform: uppercase;
    z-index: 5;
    background-color: #fff;
}
.my-icon::before {
    position: absolute;
    border: 2em solid #fff;
    border-bottom: none;
    border-top-right-radius: 2em;
    border-top-left-radius: 2em;
    left: 3em;
    top: -2em;
    content:'';
    z-index: 3;
}
.my-icon::after {
    position: absolute;
    border: 2.5em solid blue;
    border-bottom: none;
    border-top-right-radius: 2.5em;
    border-top-left-radius: 2.5em;
    left: 2.5em;
    top: -2.5em;
    content:'';
    z-index: 1;
}

HTML

<span class='my-icon'>Club Members</span>

The span itself is the rectangle. The ::before pseudo-element is the inner circle. The ::after pseudo-element is the outer circle.

See jsFiddle

Answer 2

.halfCircle {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 67px, 108px, 0px)
}
#halfCircleSlice1 .halfCircle {
background-color: #1b458b;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
<div id="halfCircleSlice1" class="hold">
    <div class="halfCircle"></div>
</div>