自定义边框元素与顶部的突破

Question

我正在尝试在html和css中为具有自定义边框的网站创建一个元素，使其与下面显示的图像完全相同。因此，元素有一个边框，包含所有边，在顶线的中心有一个断点，在这个断点中居中的文字。

非常感谢任何帮助。

Answer 1

只需将您的信件设置为position:absolute背景色;

＆＃13;

＆＃13;

#text
{
  width:300px;
  border:1px solid black;
  position:relative;
  padding:30px;
  margin-top:30px;

}

#letter
{
  position:absolute;
  top:-40px;
  font-size:30px;
  display:inline-block;
  background-color:white;
  left:140px;
  padding:20px;
}

＆＃13;

<div id="text">
<article>
Wikipedia was launched on January 15, 2001, by Jimmy Wales and Larry Sanger.[11] Sanger coined its name,[12][13] a portmanteau of wiki[notes 4] and encyclopedia. There was only the English-language version initially, but it quickly developed similar versions in other languages, which differ in content and in editing practices
</article>
<div id="letter">B</div>
</div>

＆＃13;

＆＃13;

＆＃13;

另一种可能没有背景但有显示的可能性：flex。

id=all的div并不重要，我将其设置为背景。

＆＃13;

＆＃13;

#all
{
 background: linear-gradient(to right,#EB9A7F,#9AEB7F,#7FD0EB,#D07FEB); 
 background-size: cover;
 height:auto;
 padding:10px;
}

#text
{
   display:flex;
   flex-direction:column;
   position:relative;
    

}

#text #letter
{
  position:relative;
  top:-1.5em;
  font-size:2em;
  padding:1em;
}

#left,#right
{
  flex:1;
  border-top:1px solid black;
  align-items: stretch;
}

#left
{
  border-left:1px solid black;
}

#right
{
  border-right:1px solid black;
}

article
{
  border:1px solid black;
  border-top:0px solid;
  padding:20px;
}
#top
{
  height:0px;
  display:flex;
  flex-direction:row;
}

＆＃13;

<div id="all">

<div id="text">
<div id="top">

  <div id="left">

  </div>
  <div id="letter">B</div>
  <div id="right">

  </div>
</div>
<article>
Wikipedia was launched on January 15, 2001, by Jimmy Wales and Larry Sanger.[11] Sanger coined its name,[12][13] a portmanteau of wiki[notes 4] and encyclopedia. There was only the English-language version initially, but it quickly developed similar versions in other languages, which differ in content and in editing practices
</article>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

div {
  width: 200px;
  padding: 1em;
  border: thin solid blue;
  position: relative;
}

div:before {
  content: "A";
  position: absolute;
  background: white;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel nibh vel nisl mattis convallis quis ultrices lorem. Duis eget molestie enim. Fusce luctus, lorem iaculis faucibus pretium, enim erat iaculis nunc, sed bibendum ipsum felis in leo. Pellentesque
  at aliquet erat. Phasellus imperdiet fermentum placerat.</div>

Answer 3

如果您的div始终具有相同的背景，则可以在::before / ::after伪元素中添加具有纯色背景的字母，以覆盖边框。我还在伪元素中添加了边框，因此它位于框的“内部”，但如果您的框背景与页面背景相同，它可能只是一个常规边框。

以下是演示：https://jsfiddle.net/norin89/s10tap73/1/