Question

我如何制作CSS sharp＆＃34; V＆＃34;喜欢水平角？看起来像这样的角落＆lt; ＆GT;好像角落在<legend>和<fieldset>中左右两侧都出现了。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我如何使CSS锐利＆＃34; V＆＃34;像`<legend>`和`<fieldset>`的水平角？

1 个答案: