如何使用CSS绘制一个框周围的边框的一半

I have a design in which I have to draw half of the border around a text. The method I am using to hide half of the border around the box forces me to use an absolutely positioned child element, which goes out of the flow of the relatively positioned parent. The consequence is that, when the length of the text increases, the parent box does not grow with the child and the text goes over the border. I want the parent to grow in height to surround the text.

我有一个设计，我必须在文本周围绘制一半的边框。我用来隐藏框周围边框的一半方法迫使我使用一个绝对定位的子元素，该子元素离开相对定位的父元素的流。结果是，当文本的长度增加时，父框不会随着孩子一起增长而文本越过边界。我希望父母的身高增长以包围文本。

What should I do to achieve the desired design and make the parent surround the child text?

我该怎么做才能实现所需的设计并使父级环绕子文本？

.mask-right-half {
  width: 70%;
  height: 101%;
  top: -1px;
  left: -1px;
  position: absolute;
  background-color: white;
}

.black-border {
  position: relative;
  border: 1px solid #999;
  min-height: 250px;
  max-height: 350px;
  margin: 20px;
}

.text {
  position: absolute;
  padding: 30px 20px;
  z-index: 999;
}

<div class='black-border'>
  <div class='mask-right-half'></div>
  <div class='text'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text.This testing text.This testin
    </p>

  </div>
</div>

View on JSFiddle

在JSFiddle上查看

2 个解决方案

#1

Simply consider linear-gradient as border-image and you will have what you need with less code:

只需将线性渐变视为边界图像，您就可以使用更少的代码获得所需的内容：

p {
 padding:20px;
 border:2px solid;
 border-image:linear-gradient(to right,transparent 50%,#000 50%) 20;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

Here is another idea with pseudo element:

这是伪元素的另一个想法：

p {
 padding:20px;
 position:relative;
}
p:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:50%;
  border:2px solid;
  border-left:none;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

Another way using linear-gradient as background (useful if you want to manage border separately)

使用线性渐变作为背景的另一种方法（如果您想单独管理边框，则非常有用）

p {
 padding:20px;
 background:
 linear-gradient(to right,#000,#000) 100% 0/60% 2px no-repeat,
 linear-gradient(to right,#000,#000) 100% 100%/50% 2px no-repeat,
 linear-gradient(to right,#000,#000) 100% 0/2px 100% no-repeat;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

#2

It seems that the .text element does not need to be positioned absolutely.

似乎.text元素不需要绝对定位。

.mask-right-half {
  width: 70%;
  height: 100%;
  left:-1px;
  top:-1px;
  padding:0 0 2px;
  position: absolute;
  background-color: white;
 }

.black-border {
  position: relative;
  border: 1px solid #999;
  min-height: 250px;
  margin: 20px;
}

.text {
  position: relative;
  padding: 30px 20px;
  z-index: 999;
}

<div class='black-border'>
  <div class='mask-right-half'></div>
  <div class='text'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
  </div>
</div>

---

Edit

To simplify the markup, I might even recommend using pseudo-element for the border mask:

为了简化标记，我甚至可能建议使用伪元素作为边框掩码：

.black-border:after {
  content: "";
  position: absolute;
  width: 70%;
  height: 100%;
  left: -1px;
  top: -1px;
  padding: 0 0 2px;
  background-color: white;
  z-index: -1;
}

.black-border {
  position: relative;
  border: 1px solid #999;
  margin: 2em;
  padding: 1.5em;
  z-index: 1;
}

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
  </p>
</div>

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
</div>

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
</div>