在段落旁边绘制圆形线的最简单方法是什么？

Question

我希望在文字旁边有一条垂直线。我可以使用＆＃39; border-left＆＃39;在左边画一条垂直线，但我还没有找到如何围绕它的角落。下图显示了它应该如何：

Answer 1

使用绝对定位的伪元素来实现相同的目的。在下面的示例中，我使用的是::before绝对定位并设置为父级的完整高度（使用top: 0; bottom: 0;技巧）。然后，您可以简单地设置宽度并使用宽度的一半的border-radius来实现圆角。

p {
  position: relative; /* Required so that pseudo-element is positioned correctly */
  padding-left: 30px; /* Dummy value to make space for pseudo-element */
}

p::before {
  /* Create pseudo-element and give it content */
  content: '';
  display: block;
  
  /* Position it in its parent so that it is:
   * - to the left
   * - occupies full height
   */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  
  /* Give it a fixed width and rounded corners */
  width: 10px;
  border-radius: 5px;
  
  /* Appearance */
  background-color: steelblue;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar a.</p>

Answer 2

试试这个：

＆＃13;

＆＃13;

.txt {
    width: 400px;
    position: relative;
}

.txt:before {
    content: '';
    width: 10px;
    height: 100%;
    position: absolute;
    background-color: skyblue;
    border-radius: 5px;
}

p {
    margin-left: 20px;
}

＆＃13;

<div class="txt">
 <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin metus tincidunt felis maximus, maximus sollicitudin mi ultrices. Curabitur libero arcu, bibendum ac suscipit ut, elementum scelerisque lacus. Praesent ultricies commodo porttitor. Fusce eget velit nisi. Praesent vulputate venenatis dui, efficitur sollicitudin nisi pulvinar.
 </p>
</div> 

＆＃13;

＆＃13;

＆＃13;