如何使CSS的“ V”形像“ <legend> `和` <fieldset> `？

Question

How do I make in CSS sharp "V" like horizontal corners? Corners that look like this < > as if the corners were arose to left and right in both the <legend> and then in the <fieldset> as well.

 #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

In general, you need to set some content with the css pseudo elements :before or :after . Then by setting the border widths for top/bottom you can create a triangle shape.

See css-triangle demo, or below example.

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