如何使 CSS 像 `<legend>` 和 `<fieldset>` 的水平角一样锐利的“V”？

Posted 2023-02-16

【中文标题】如何使 CSS 像 `<legend>` 和 `<fieldset>` 的水平角一样锐利的“V”？

【英文标题】：How do I make CSS sharp "V" like horizontal corners for `<legend>` and `<fieldset>`?

【发布时间】：2017-09-23 02:49:41

【问题描述】：

如何在 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>

【问题讨论】：

我不确定我明白你的意思，所以最好有一张照片

【参考方案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>

【讨论】：

谢谢它是完美的。我还将这两个切换为:before 代码left: -10px; border-right: 10px solid #a1a1a1;。效果很好。