html - 带有CSS的响应式三 Angular 形右侧

Question

我正在用 css 制作响应式三 Angular 形(右箭头)。我的问题是高度宽度没有增加。我们也可以在变换中更改边框。

这是我的 CSS 代码:-

.triangle-right {
    width: 0;
    height: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    overflow: hidden;
    float:left;
}
.triangle-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    margin-left: -500px;

    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

像这样

.class:after{content: "";
  position: absolute;
  top:0px;  left: 0;
 background: -webkit-linear-gradient(#d5adee, #fff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#d5adee, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#d5adee, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#d5adee, #fff); /* Standard syntax */
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
transform: rotate(-45deg) scale(1.4);
}

请给我任何解决方案的建议。

Answer 1

我使用 vw 单位进行响应怎么样

div {
  width: 20vw;
  height: 20vw;
  overflow: hidden;
  position: relative;
  border-left: 2px solid black;
}
div:after {
  position: absolute;
  content: "";
  width: 20vw;
  height: 20vw;
  transform: rotate(45deg);
  background: -webkit-linear-gradient(red,orange,yellow,green);
  background: -moz-linear-gradient(red,orange,yellow,green);
  background: -o-linear-gradient(red,orange,yellow,green);
  background: -ms-linear-gradient(red,orange,yellow,green);
  background: linear-gradient(red,orange,yellow,green);
  margin-left: -15vw;
  border-top: 2px solid black;
  border-right: 2px solid black;
}

<div></div>