How can I make this shape? - html

Question

How can I make the following with HTML and CSS, when I have been provided with background-image.
<span class='some-cl'> defence personnel </span>

Answer 1

So a variation of it is possible with CSS, but my version is the ugliest piece of shit you'll find. Check it out: http://jsfiddle.net/7s4L0jhy/
I have an extra element for the half circle thing, but other than that, it's all variable according to the text in your element.
.p {
border: 3px solid #fff;
border-top: 0;
display: inline-block;
margin: 0 auto;
padding: 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
And then I create the top bar, but leave space for the circle:
.p:before {
content: '';
position: absolute;
right: calc(50% + 35px);
left: -3px;
height: 3px;
top: 0;
background: #fff;
}
.p:after {
content: '';
position: absolute;
left: calc(50% + 35px);
right: -3px;
height: 3px;
top: 0;
background: #fff;
}
And lastly, the fake circle thingy:
.p .bar {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 3px solid #fff;
border-left: 0;
border-bottom: 0;
border-right: 0;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
As per the other answer, an image would definitely be easier for you, but this should work for anything ie10+. Good luck.

Answer 2

There are many approaches to solve this. However I think the requirement here is high scalability, that is we can change the size of the outside element (the wrapper) and the shape should keep scaling accordingly. Doing so requires a little trick relating to overflow:hidden, the top shape includes a nearly half circle at center and the 2 lines besides, the trick here is we need to fix the ends (of the 2 lines) connecting to the nearly half circle and let the other ends free, so that when scaling up/down the overflow:hidden will cut off those ends if there is any error in calculation.
Here is the code:
HTML:
<div class='frame'>
<div class='top'>
<div class='peak'></div>
</div>
<div class='content'>
Defense personnel
</div>
</div>
CSS:
.frame > .top, .top > .peak {
position:absolute;
}
.frame {
position:relative;
}
.frame > .top {
overflow:hidden;
left:-3px;
right:-3px;
padding-top:100%;
bottom:100%;
}
.frame > .top:before, .frame > .top:after {
content:'';
position:absolute;
border-top:3px solid white;
width:30%;
bottom:0;
}
.frame > .top:before {
right:70%;
}
.frame > .top:after {
left:70%;
}
.top > .peak {
border:3px solid white;
border-radius:50%;
left:50%;
width:40%;
padding-top:40%;
bottom:0;
-webkit-transform:translate(-50%,44%);
}
.frame {
width:300px;
height:200px;
margin-top:100px;
border:3px solid white;
border-top:0;
}
.frame > .content {
width:100%;
height:100%;
text-align:center;
padding-top:20px;
font-size:30px;
color:white;
}
body {
background:url(http://lorempixel.com/800/600);
}
Demo.
Try resizing the .frame and you'll see how flexable it is.

Answer 3

.some-cl{background:#003 /*bg color*/ url(your_image.jpg) no-repeat 50%; text-transform:uppercase; text-align:center; padding-top:40px /*adjust at will */ }
there are better and more complex methods, but since you're asking extremely basic CSS questions, I assume this should be enough