html - 如何使 CSS 锐利 "V"像 `` 和 `` 的水平 Angular ？

Question

如何在 CSS 中制作尖锐的“V”形水平 Angular ？看起来像这样的 Angular < > 好像 Angular 在 <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设置一些内容。然后通过设置顶部/底部的边框宽度，您可以创建一个三 Angular 形。

参见 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>