「<legend>」と「<fieldset>」のCSSをシャープな「V」のようにするにはどうすればよいですか？

Question

CSSのシャープな「V」をどのように水平コーナーのようにしますか？コーナーも同様に<fieldset>で<legend>、その後の両方で左右に生じたたかのように、この<>のようになり コーナー。一般的に

#FieldsetSeekBox { 
 
    padding: 8px 1px; 
 
    border: 1px solid #a1a1a1; 
 
} 
 

 
#LegendStyle { 
 
    border-style: none; 
 
    background-color: #a1a1a1; 
 
    font: bold 13px Tahoma, Arial, Helvetica; 
 
    color: #000000; 
 
    padding-left: 10px; 
 
    position: relative; 
 
    border-radius: 8px 8px 0px 0px; 
 
}

<fieldset id="FieldsetSeekBox"> 
 
    <legend id="LegendStyle">&nbsp; Web Search &nbsp;</legend> 
 
    <input type="text" name="u" size="70" value="" placeholder="Type your Search here and click Search..." id="SeekBox"> 
 
</fieldset>

Answer 1

、あなたはCSS擬似要素:beforeまたは:afterで一部のコンテンツを設定する必要があります。次に、上/下の境界幅を設定することによって、三角形を作成することができます。

はcss-triangleデモ、または例の下を参照してください。

#FieldsetSeekBox { 
 
    padding: 8px 1px; 
 
    border: 1px solid #a1a1a1; 
 
} 
 

 
#LegendStyle { 
 
    border-style: none; 
 
    background-color: #a1a1a1; 
 
    font: bold 13px Tahoma, Arial, Helvetica; 
 
    color: #000000; 
 
    padding-left: 10px; 
 
    position: relative; 
 
} 
 

 
#LegendStyle:after { 
 
    content: " "; 
 
    display: block; 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 0; 
 
    border-top: 8px solid transparent; 
 
    border-bottom: 8px solid transparent; 
 
    border-left: 10px solid #a1a1a1; 
 
}

<fieldset id="FieldsetSeekBox"> 
 
    <legend id="LegendStyle">&nbsp; Web Search &nbsp;</legend> 
 
    <input type="text" name="u" size="70" value="" placeholder="Type your Search here and click Search..." id="SeekBox"> 
 
</fieldset>