Bootstrap表的功能区

Question

我正在寻找方法并询问如何在我的桌子上制作这种色带。我需要让它看起来像。

我有0经验丝带，找到一些解决方法如何制作它们，它们非常好，但我不知道如何将它包裹在我的桌子周围。

我希望有人向我解释如何制作这个问题，所以我可以从中学到一些东西，因为我需要在我的导航栏中添加另一个功能区。

<!-- Tables
      ================================================== -->
    <div class="table">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-3">
            <div class="bs-component"><!--Start the table-->
                <table class="table table-striped" data-scrollreveal="enter left, wait 1.5s">
                  <thead>
                    <tr>
                      <th><h1>Start Ribbon Here!<h1></th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr><tr class="active">
                      <td><h1>Ribbon End Here!</h1></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                      
                    
                  </tbody>
                </table> 
              </div><!-- end of table -->
          </div>
        </div>
      </div>
    </div>

Answer 1

您可以在父div元素上使用伪元素。

类似的东西：

This fiddle shows

或者这个片段：

.table {
  position: relative;
}
.table:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 120px;
  height: -webkit-calc(100% - 50px);
  height: calc(100% - 50px);
  background: teal;
  border-left: 5px dashed blue;
  border-right: 5px dashed blue;
  box-shadow: 0 0 0 15px teal,  inset 0 5px 5px -2px lightgray;
  border-radius: 10px 10px 2px 2px;
}
.table:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 40px;
  height: 75px;
  width: 75px;
  background: teal;
  border-bottom: 5px dashed blue;
  border-right: 5px dashed blue;
  box-shadow: 0 0 0 15px teal;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

<!-- Tables
      ================================================== -->
<div class="table">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="bs-component">
          <!--Start the table-->
          <table class="table table-striped" data-scrollreveal="enter left, wait 1.5s">
            <thead>
              <tr>
                <th>
                  <h1>Start Ribbon Here!<h1></th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                      <th>Mine Picture Here</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr>
                    <tr class="active">
                      <td>Membership Plan</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                      <td>Column content</td>
                    </tr><tr class="active">
                      <td><h1>Ribbon End Here!</h1>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>


              </tbody>
          </table>
        </div>
        <!-- end of table -->
      </div>
    </div>
  </div>
</div>

然后，您可以使用负z-index将横幅定位在文本下方。