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

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伪类用于25%红色边框...使用位置值调整红色边框的位置。

Stack Snippet

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用边框渐变的另一种方法

Stack Snippet

＆＃13;

＆＃13;

body {
  margin: 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;