0

我需要使用包含 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>

这是我的代码的输出。在此处输入图像描述

4

3 回答 3

4

现场演示

在此处输入图像描述

使用CSS 伪和选择器简化您的 HTML 标记
并创建疯狂的东西: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;
}
于 2013-08-16T09:02:45.987 回答
1

您可以只为顶角创建一个负半径的边框。有关更多信息，请参阅此帖子...

于 2013-08-16T08:36:23.843 回答
0

将额外的Corner类添加到您的 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;
}
于 2013-08-16T08:44:33.210 回答