主页 / coding / 问题 / 77745105
Accepted
Morton
Asked: 2024-01-02 17:14:50 +0800 CST

如何将另一个自定义位置颜色添加到三角形CSS中？

  • 772

如何像这张照片一样在三角形内添加绿色条？ 在此输入图像描述

我尝试添加三角形CSS，但我不知道如何将绿色条写入三角形CSS。

CSS 文件：

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

布局代码：

<div className={styles.triangle} />
css

2 个回答

  1. Best Answer

    如果您正在寻找 CSS 解决方案，您可以在这里尝试使用多个三角形并获得所需的结果。

    像这样的东西：

    .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

.triangle::before {
    position: relative;
    left: -50vw;
    top: -19px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #83e5da;
}


.triangle::after {
    position: relative;
    left: -100vw;
    top: -16px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #1a202c;
}
    <div class="triangle">  

</div>

    • 4

  2. 不要玩弄边界，考虑更容易调整的现代方法

    .box {
  /* triangle size */
  width: 100%;
  height: 50vh;
  /* */
  background: 
   linear-gradient(lightblue /* line color*/ 0 0) no-repeat
    right/40%, /* 40% = line length */
   #000; /* background color */
  clip-path: polygon(100% 0,100% 100%,0 100%);
  display: grid;
  overflow: hidden;
}
.box::before {
  content:"";
  clip-path: inherit;
  background-color: inherit;
  translate: 30px; /* the line thickness */
}


body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: end;
}
    <div class="box"></div>

    • 0

相关问题