CSS边框DIV作为形状 [英] CSS Border DIV as a Shape

问题描述

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

如果可能的话，我还希望边框能够做出反应。我有一些困难，找出如何做到这一点。

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

到目前为止，我的代码是;

< pre class =snippet-code-css lang-css prettyprint-override> #mainDiv {height：500px;宽度：500px;位置：相对;边框顶部：10px纯黑色;背景：＃3beadc;}。borderLeft {border-left：10px纯黑色;位置：绝对; top：0; bottom：50％;}

< div id = mainDiv> < div class =borderLeft> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Mauris希望能够满足您的需求。 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坐在amet，consectetur adipiscing elit。 Nulla consequat pellentesque pharetra。 Donec imperdiet ex metus。 Vestibulum nulla ligula，semper velodiod，ornare pellentesque arcu。 Sed neque lectus，fermentum non ultricies id，sollicitudin eget turpis。< / p> < / div>< / div>

您可以在和<$ c $之前使用：

解决方案 c>：在伪元素之后创建小边框。也许不是最好的方式，但它的工作原理：

$ b

#mainDiv {height： 500像素;宽度：500px;位置：相对;填充：10px 15px;背景：＃3beadc; border-radius：0 0 100px 0;}＃mainDiv：before {content：;位置：绝对; top：0;左：0; height：100px;宽度：100px;边框顶部：10px纯黑色; border-left：10px纯黑色;}＃mainDiv：after {content：;位置：绝对;底部：0;正确：0; height：100px;宽度：100px; border-bottom：10px纯黑色; border-right：10px纯黑色; border-radius：0 0 100px 0;}

< div id =mainDiv> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Mauris希望能够满足您的需求。 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坐在amet，consectetur adipiscing elit。 Nulla consequat pellentesque pharetra。 Donec imperdiet ex metus。 Vestibulum nulla ligula，semper velodiod，ornare pellentesque arcu。 Sed neque lectus，fermentum non ultricies id，sollicitudin eget turpis。< / p>< / div>

b $ b

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;

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>

Any help is appreciated.

解决方案

You can use :before and :after pseudoelements to create small borders. Maybe not the best way, but it works:

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

这篇关于CSS边框DIV作为形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！