Question

我用css做响应三角形（右箭头）。我的问题是高度宽度不增加。也可以在变换中改变边界。

这是我的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单位进行回应

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

响应三角形右侧与CSS

1 个答案: