CSS Border DIV作为一个形状

I have a div element containing some text. I would like to add a border to the top left and bottom right corners in order to create a shield or crest outline effect, similar to the following;

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

I would also like the border to be responsive if possible. I am having some difficulty figuring out how to do this.

如果可能的话,我也希望边界能够做出回应。我很难搞清楚如何做到这一点。

Here is a link to the fiddle I have created.

这是我创建的小提琴的链接。

My code so far is;

到目前为止我的代码是;

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

更多相关文章

随机推荐