如何创建不同颜色的左上和右下边框？

Question

我正在尝试在div上创建边框，该边框的左上角和右下角有两种不同的颜色。 找不到解决方案，图像或直接在CSS上。

Answer 1

请参考以下示例。

您可以将位置设为absolute的两个红色部分，可以将它们相对于类为box的div进行定位，其位置为relative。 / p>

.box {
  background-color: gray;
  height: 400px;
  width: 400px;
  position: relative;
}

.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
  border-left: 10px solid darkblue;
  border-top: 10px solid darkblue;
  height: 30px;
  width: 30px;
}

.bottom-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-bottom: 10px solid red;
  border-right: 10px solid red;
  height: 30px;
  width: 30px;
}

<div class="box">
  <div class="top-left"></div>
  <div class="bottom-right"></div>
</div>

Answer 2

您可以遵循Naren Murali的示例，也可以创建pseudo-elements，因此不需要太多的HTML。

我创建了两个伪元素:before和:after

:before

在CSS中，:: before创建一个伪元素，该元素是所选元素的第一个子元素。它通常用于将化妆品内容添加到具有content属性的元素。默认情况下是内联的。

:after

在CSS中，:: after创建一个伪元素，该元素是所选元素的最后一个子元素。它通常用于将化妆品内容添加到具有content属性的元素。默认情况下是内联的。

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: grey;
}
div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
    border-top: 5px solid blue;
    border-left: 5px solid blue;
}
div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border-bottom: 5px solid red;
    border-right: 5px solid red;
}

<div></div>

Answer 3

不需要额外的元素或伪元素，可以轻松实现多个背景：

.box {
  height: 200px;
  width: 400px;
  background:
   linear-gradient(red,red) 5px 5px/80px 20px,
   linear-gradient(red,red) 5px 5px/20px 80px,
   linear-gradient(blue,blue) calc(100% - 5px) calc(100% - 5px)/20px 80px,
   linear-gradient(blue,blue) calc(100% - 5px) calc(100% - 5px)/80px 20px,
  #ccc;
 background-repeat:no-repeat;
}

<div class="box">
</div>