如何使CSS變得像「<legend>」和「<fieldset>」這樣的水平角「V」？

我該如何在CSS中使用像水平角一樣的「V」形？看起來像這樣的角落<>好像角落在<legend>以及<fieldset>中都出現在左側和右側。如何使CSS變得像「<legend>」和「<fieldset>」這樣的水平角「V」？

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

來源

2017-04-25 SeekLoad

我不知道我明白你的意思，所以畫面會很好 – LGSon

一般情況下，你需要設置一些內容與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>

來源

2017-04-25 22:12:38 hughes

謝謝它是完美的。我也把這兩個換成'：before' code'left：-10px; border-right：10px solid＃a1a1a1;'。它完美的作品。 – SeekLoad

如何使CSS變得像「<legend>」和「<fieldset>」這樣的水平角「V」？

回答

相關問題