我需要使用包含 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>
这是我的代码的输出。