如何创建具有正确角半径的线？答案

【问题标题】：How to create a line with correct corner radius?如何创建具有正确角半径的线？
【发布时间】：2021-08-04 00:44:03
【问题描述】：

我正在制作一个 react - redux 应用程序，我最近遇到了一个问题，我需要在某些文本旁边显示一行，以使其看起来像一个引号。我在CSS中使用了border属性，结果是这样的。

但我希望它的位置带有圆角半径，如下图所示，

这是我用来获取的 CSS 和 HTML，

.post-quote-layout{
    margin-top: 16px;
    background-color: white;
    border-left: #6D45FC solid 6px;
    height: 100%;

}


.post-quote-text{
    font-size: 17px;
    background-color:white;
    margin-left: 10px;
    line-height:26px;
}

<div key={index} className="post-quote-layout">
     <div className="post-quote-line">
        <p className="post-quote-text" dangerouslySetInnerHTML={{__html:item?.text}} />
     </div>
</div>

如何实现结果，我希望该行也随着内容的增加而响应。

【问题讨论】：

您可以在整个高度上使用具有背景和边框半径的绝对伪，也可以仅在边框底部使用一个点。

标签： html css reactjs flexbox

【解决方案1】：

使用绝对像这样定位的伪元素

div {
  width: 50vw;
  margin: auto;
  position: relative;
  padding-left: 10px;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: rebeccapurple;
  border-radius: 3px
}

<div>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
    qui! Enim, neque odit? Laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</div>

【讨论】：

【解决方案2】：

您是否尝试过使用 svg 线并将其 stroke-linecap 属性设置为圆形而不是使用边框？

stroke-linecap: round;

https://css-tricks.com/almanac/properties/s/stroke-linecap/

编辑：如果您想坚持边界，这是另一种方法：

CSS border stroke line cap rounded

【讨论】：