html - 作为形状的 CSS 边框 DIV

Question

我有一个包含一些文本的 div 元素。我想在左上角和右下角添加边框，以创建盾牌或波峰轮廓效果，类似于以下内容；

如果可能的话，我也希望边框能够响应。我在弄清楚如何执行此操作时遇到了一些困难。

Here是我创建的 fiddle 的链接。

到目前为止我的代码是；

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  border-top: 10px solid black;
  background: #3beadc;
}

.borderLeft {
  border-left: 10px solid black;
  position: absolute;
  top: 0;
  bottom: 50%;
}

<div id="mainDiv">
  <div class="borderLeft">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
  </div>
</div>

感谢任何帮助。

Answer 1

您可以使用 :before 和 :after 伪元素来创建小边框。也许不是最好的方法，但它有效:

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  padding: 10px 15px;
  background: #3beadc;
  border-radius: 0 0 100px 0;
}

#mainDiv:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-top: 10px solid black;
  border-left: 10px solid black;
}

#mainDiv:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
  border-radius: 0 0 100px 0;
}

<div id="mainDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
</div>