0

image に示すように、アークを含む 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

ライブデモ

ここに画像の説明を入力

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;
}
于 2013-08-16T09:02:45.987 に答える
1

上隅のみに負の半径の境界線を作成できます。詳細については、この投稿を参照してください...

于 2013-08-16T08:36:23.843 に答える