用css绘制四分之一圆和一条线

Question

我需要使用包含arc的css创建一个框，如图像所示。我想用纯CSS做到这一点。我能够制作弧线但不能绘制线条。这是我的html和css代码。

<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>

这是我的代码的输出。

Answer 1

<强> LIVE DEMO

简化您的HTML标记
使用 CSS伪:before和:after选择器

创建疯狂的东西

<强> 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;
}

Answer 2

您只需为顶角创建一个负半径的边框。见this post for more info...

Answer 3

在您的left_arc和right_arc div中添加额外的角落类。

这将显示在此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;
}