Draw a quarter circle and a line with css

Question

I need to make a box using css containing arc as shown in image enter image description here . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.

<style type="text/css">

.left_arc{
    border-bottom: 1px solid #D0BFA6;
    border-radius: 0 0 360px 0;
    border-right: 1px solid #D0BFA6;
    float: left;
    height: 11px;
    padding-top: 1px;
    width: 11px;
 }
.right_arc{
    border-bottom: 1px solid #D0BFA6;
    border-left: 1px solid #D0BFA6;
    border-radius: 0 0 0 360px;
    float: left;
    height: 11px;
    padding-top: 1px;
    width: 11px;
}
.text_arc {
    background: none repeat scroll 0 0 #FEEEEA;
    border-top: 1px solid;
    color: #A29061;
    float: left;
    font-family: times new roman;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 1px;
    padding-left: 18px;
    padding-top: 6px;
    text-transform: uppercase;
    width: 88px;
}
</style>

<div class="main_style">
    <div class="left_arc"></div>
    <div class="text_arc">Canada</div>
    <div class="right_arc"></div>
</div>

Here is the output of my code. enter image description here

Roko C. Buljan · Answer 1 · 2013-08-16T09:12:55.517

LIVE DEMO

enter image description here

Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors

HTML

<div class="main_style">
    <div class="text">Canada</div>
</div>
<div class="main_style">
    <div class="text">USA</div>
</div>

CSS:

.main_style {
    background: none repeat scroll 0 0 #FEEEEA;
    font: italic normal normal 16px/1em Times, "Times New Roman", serif;
    text-transform: uppercase;
    text-align:center;
    letter-spacing: 1px; 
    color: #A29061;
    position:relative;
    overflow:hidden;
    float: left;
}
.text{
    border: 1px solid #D0BFA6;  
    padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
    content:'';
    position:absolute;
    top:-13px;
    width:24px;
    height:24px;
    background:#fff;
    border: 1px solid #D0BFA6;
    border-radius: 42px;  
}
.main_style:before{
    left:-13px;
}
.main_style:after{
    right:-13px;
}

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

You can just create a border with negative radius for only the top corners. See this post for more info...

edited May 23 '17 at 11:44

Community

1
1

answered Aug 16 '13 at 08:36

Anshu Dwibhashi

4,617
3
28
59

score 0 · Accepted Answer · answered Aug 16 '13 at 08:44

Add extra Corner class to your left_arc and right_arc divs.

That will be shown in this JSBin.

 .text_arc {
    background: none repeat scroll 0 0 #FEEEEA;
    border-top: 1px solid;
    color: #A29061;
    float: left;
    font-family: times new roman;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 1px;
    padding-left: 18px;
    padding-top: 6px;
    text-transform: uppercase;
    width: 100px;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.left_arc {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}
.right_arc {
    top: -1px;
    left: 110px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.main_style {
    position: relative;
    margin: 30px;
    width: 119px;
    height: 28px;
    background: #ccc;
    border: 1px solid #333;
}

Draw a quarter circle and a line with css

3 Answers3