Question

我想创建此模型中显示的内容：

这是我目前拥有的：https://codepen.io/raney24/pen/VOmjBY

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border-left: red solid 1px;
  border-right: red solid 1px;
  border-bottom: red solid 1px;
  .heading, .heading-subtitle {
    text-align: center;
  }
  .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
    &:after {
      content: '';
      border-top: 1px solid red;
      height: 1px;
      width: 100%;
      display: block;
      position: relative;
      top: -20px;
      z-index: -1;
    }
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

我不确定如何向下移动边框，以免它们超出我的标题边框。也许我是从错误的方法出发，如果是这样，请告诉我您的想法。

我愿意使用JavaScript / JQuery，但希望尽可能避免使用它。

Answer 1

删除了:after CSS，并使用margin: -20px将header移动到顶部检查以下链接

https://codepen.io/Xenio/pen/EzNgaB

.header-border {
  width: 100%;
  margin-bottom: 10px;
  border: red solid 1px;
  
  .heading, .heading-subtitle {
    text-align: center;
    margin-top: -20px
  }
 
 .heading > span, .heading-subtitle > span {
    background-color: white;
    box-shadow: white 11px 0px 0px,
                white -13px 0px 0px;
  }
  .heading-subtitle > span {
    &:after {
      top: -13px;
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="header-border mt-4">
      <h2 class="heading"><span>Learn More About What We Do</span></h2>
      <div class="col-sm-4 mt-5">
        <div class="header-border">
          <h4 class="heading-subtitle"><span>Coding School</span></h4>
          <p>Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.</p>
           <div class="text-center">
             <a class="btn btn-sm btn-primary" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- row-->
</div><!-- container -->

Answer 2

fieldset {
 position: relative; 
padding: 35px 25px 75px;
 }
fieldset legend
 {
 	left:50%;
 } 
.legend2 
{ position: absolute; 
bottom: -1.4ex; 
left: 50%; 
background: white 
 }
caption, .legend2 
{ padding: 0 2px 
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>


<fieldset><legend align="center">Caption <span class=legend2><button>click</button></span></legend>
  Put fields here.
</fieldset>
</body>
</html>

在div周围创建一个边框，其中顶部边框通过标题，底部边框通过按钮

2 个答案: