Question

我想设计一个覆盖半个文本内容区域的边框，半个文本内容应该使用CSS和HTML在边框之外。

请参阅下面的图片作为示例。

Answer 1

您可以使用绝对定位的具有负z-index的伪元素。

.container {
  position: relative;
  padding: 30px;
}

.container::before {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 70%;
  left: 0;
  border: 5px solid #E7E7E9;
  content: '';
}

<div class="container">
  <h2>The Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut lectus non risus tincidunt lacinia nec ut nunc. Nam viverra ipsum vitae purus tempor, ut maximus lorem semper. Maecenas efficitur feugiat sem, et egestas ex tincidunt eu. Maecenas eu tempor justo. Duis non tempus nunc. Curabitur euismod non lectus non tempor. Cras non risus vel nisl luctus efficitur. Morbi consectetur ante vel ullamcorper semper. Ut interdum risus non velit dignissim aliquet. Ut porta rutrum efficitur. Quisque suscipit est nec tempor vestibulum. Vivamus vel dui at risus auctor ultricies a sed justo.</p>
</div>

Answer 2

要设计此效果，您可以使用虚拟绝对div来创建背景边框。

＆＃13;

* {
                box-sizing: border-box;
                border: 0px;
                padding: 0px;
                margin: 0px;
            }
            .container {
                position: relative;
                width: 100%;
                height: 500px;
                background: #f9f9f9;
                z-index: 0;
            }
            .fake-border {
                position: absolute;
                width: 40%;
                height: 90%;
                margin: 2.5%;
                z-index: -1;
                border: 5px solid #bdbdbd;
            }
            .content {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                padding-left: 100px;
            }

＆＃13;

<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="fake-border">   
            </div>
            
            <div class="content">
                <h2>Header</h2>
                <br><br>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </body>
</html>

＆＃13;

如何围绕内容半边区边框？

2 个答案: