如何在不固定宽度和高度的情况下使用css绘制响应对角线?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (17)

我想绘制一条对角线,它应该根据容器的宽度和高度做出响应。我正在使用转换,如果父宽度发生变化,那么容器内的线就不完整了。

现在它可以在固定的宽度和高度上正常工作,寻找响应式解决方案。

这是我试过的:

#container {
  position: relative;
  height: 200px;
  width: 200px; // Changing the width here breaks the diagnol line position
  overflow: hidden;
  background-color: grey;
}

#container:before {
  content: '';
  position: absolute;
  left: 20%;
  width: 100%;
  height: 200%;
  background-color: rgb(255, 255, 255);
  /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div id="container"></div>

提问于
用户回答回答于

只需使用梯度:

.box {
  height:200px;
  width:50%;
  background:
   linear-gradient(to bottom right,rgba(0,0,0,0.5) 50%,transparent 0),
   green;
}
<div class="box"></div>

扫码关注云+社区

领取腾讯云代金券