如何使用两种颜色的边框？

Question

这是我的代码：

<style>
  .myclass {
    border-right: 15px solid green;
  }
</style>

<div class="myclass">
  Content content content
</div>

myclass基本上是整个页面。

我怎样才能使右边框为 75% green 和 25% red？

是否可以使用 border 或者有其他方法吗？

Answer 1

您可以使用 :before 伪 class 作为 25% 红色边框...使用位置值调整红色边框的位置。

堆栈片段

body {
  margin: 0;
}

.myclass {
  border-right: 15px solid green;
  height: 100vh;
  position: relative;
}

.myclass:before {
  content: "";
  border-right: 15px solid red;
  position: absolute;
  right: -15px;
  bottom: 0;
  height: 25%;
}

<div class="myclass">
  Content content content
</div>

另一种使用方式border-gradients

堆栈片段

body {
  margin: 0;
}

.myclass {
  border-right: 15px solid;
  height: 100vh;
  border-image: linear-gradient(to bottom, green 75%, red 75%) 1;
}

<div class="myclass">
  Content content content
</div>

如何使用两种颜色的边框？

How to use two colors for border?

html

css

border