我如何使 CSS 尖锐 "V" 像 `<legend>` 和 `<fieldset>` 的水平角？

Question

如何使 CSS 像水平角一样尖锐 "V"？看起来像这样的角 < > 好像角在 <legend> 和 <fieldset> 中都向左和向右出现。

#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设置一些内容。然后通过设置 top/bottom 的边框宽度，您可以创建一个三角形。

请参阅 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>

我如何使 CSS 尖锐 "V" 像 `<legend>` 和 `<fieldset>` 的水平角？

How do I make CSS sharp "V" like horizontal corners for `<legend>` and `<fieldset>`?

html

css

fieldset

legend