Question

我有一个带有＃34;酷＆＃34;看三角形背景（覆盖50％的框）。我解决了任何固定宽度，但忘了在移动设备上宽度不再固定，使我的解决方案在移动设备上失败。

要创建背景，我使用边框技术将边框的每一边设置为高度/宽度的一半，但是，边框不能以百分比（％）为单位。

我怎么可能实现这个目标？

以下是我的代码：

.outer {
  width: 100%;
  height: 300px
}
.background-triangle {
    bottom: 0;
    right: 0;
    height: 0;
    width: 0;
    border-right: 250px solid rgba(0,0,0,.1); /* half width */
    border-bottom: 150px solid rgba(0,0,0,.1);/*half height*/
    border-left: 250px solid transparent;/*half width*/
    border-top: 150px solid transparent; /* half height*/
}

.box-color {
  position: relative; 
  background-color: #6699cc;
}

和一个非常简单的HTML

<div class="outer">
    <a href="/#">
        <div class="box-color" style="">
            <div class="background-triangle"></div>
        </div>
    </a>
</div>

如果可能，我更喜欢非javascript选项。我想我可以在窗口大小改变时设置宽度。

编辑：我想要实现的是让黑色背景三角形拉伸其包含元素的整个宽度。尝试调整jsfiddle窗口的大小，看看三角形的宽度是多少。它不遵循含有＆＃34;蓝色＆＃34;盒子宽度变化。我希望这能解决问题。

And a jsfiddle link

Answer 1

使用线性背景代替传统的三角形生成技术。在这个更新的jsFiddle上检查这个解决方案： https://jsfiddle.net/ashekthegreat/kmmg9L01/6/

.background-triangle {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: linear-gradient(to right bottom, transparent 50%, rgba(0, 0, 0, .1) 50%)
}

Css背景箭头百分比宽度

1 个答案: