我可以使用直接连接在CSS中使用不同颜色的左边和上边框吗？

Question

我想在左边有一个4px厚的粉红色边框,在其他地方有1px灰色的边框:

border: 1px solid #E5E5E5;
border-left: 4px solid #F24495;

问题是连接是对角的,所以我得到一个可怕的叠加.我试过了:

.item:before{ 
  border-left: 4px solid #F24495;
}

但没有运气.

jsFiddle示例

• jsFiddle示例突出显示对角线连接

截图

Answer 1

请参阅jsFiddle示例.要使用较粗的边框(并验证连接是直的),请参阅此示例.

HTML

.item {
  display: inline-block;
  padding: 0.2em 0.3em;
  background: #f8f8f8;
  color: #454545;

  /* Set border widths with variables */
  --top-border-width: 4px;
  --bottom-border-width: var(--top-border-width);
  --left-border-width: 16px;
  --right-border-width: var(--top-border-width);

  /* Set border styles for each side */
  border-top: var(--top-border-width) solid #e4e4e4;
  border-bottom: var(--bottom-border-width) solid #e4e4e4;
  border-right: var(--right-border-width) solid #e4e4e4;

  /* Remove the left border and add blank space where the border should be placed */
  border-left: 0;
  margin-left: var(--left-border-width);

  /* Contain the ::before */
  position: relative;
}

.item::before {
  /* Give the pseudo element substance */
  display: block;
  content: "";

  /* Add a left border with a straight edge */
  border-left: var(--left-border-width) solid #f84995;

  /* Position pseudo element's border where the normal border would have been placed */
  position: absolute;
  top: calc(0px - var(--top-border-width));
  bottom: calc(0px - var(--bottom-border-width));
  left: calc(0px - var(--left-border-width));
}

CSS

<h1 class="item">Gen.2</h1>

Answer 2

这应该工作,但需要额外的标记:

.outer {
    border: 1px solid #E5E5E5;
    border-left: 0;
}

.inner {
    border-left: 4px solid #F24495;
}

和

<div class="outer">
    <div class="inner">
        ...
    </div>
</div>

Answer 3

如果您想使用:before伪选择器,您还需要设置一些内容.例如,请参阅此jsfiddle,其中包含以下示例代码:

<div>Container</div>

CSS:

div {
    border: 10px solid black;
    border-left-width: 0;
}
div::before {
    border: 10px solid orange;
    border-right-width: 0;
    content: '';
}

显示为:

编辑
嗯,虽然这应该严格回答问题,同时试图使我的解决方案适应问题的小提琴我发现这与填充不是很好.打开建议/编辑/其他可以解决这个问题的答案:( ...