Question

我想...

1）让我的CSS3形状有一些＆＃39;倍增＆＃39;混合模式＆amp;

2）将整个形状区域拉伸到网页的整个大小。

是否可以将此区域拉伸100％宽度＆amp;网页的高度并使整个区域透明，以便黄色通过？

<div style="margin: 0 auto; 
            width: 0; 
            height: 0; 
            border: 100px solid #1F80AF; 
            border-left-color: #0099CC; 
            border-right-color: #0099CC;"></div>

我有一个 JSFiddle here 。

非常感谢任何指示。

Answer 1

你走了！

<强> HTML

<div class="wrap">

    <div class="absolute">
        Some content yo!
    </div>

</div>

<强> CSS

    html,body {
    height:100%;
    margin:0;
    padding:0;
}
body {
    background:url(http://placehold.it/250) repeat 0 0;
}

div.wrap {
    position:relative;
    margin:0;
    padding:0;
    width: 100%;
    height:100%;
    box-sizing:border-box;
    -mox-box-sizing:border-box;
    border-top:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-bottom:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-left: rgba(0,0,255,0.5) solid 50vw;; 
    border-right: rgba(0,0,255,0.5) solid 50vw;;
    -moz-background-clip: content;     /* Firefox 3.6 */
      -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
          background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

div.absolute {
    position:absolute;
    left:-50vw;
    top:-50vh;
}

这是小提琴： http://jsfiddle.net/485vb/4/

所以，基本上它的作用是使用background-clip属性来说“保持内容不透明，外面的一切都可以透明。”

然后我们使用vw和vh或视口单位将左右边框设置为视口宽度（vw）的不到50％并设置顶部和底部只有不到50％的视口高度（vh）。

这可以让你接近你想要做的事情。

修改 GCyrillus评论也是非常好的解决方案。

编辑2 已更新，包含定位内容。

CSS3形状问题 - 混合模式相乘

1 个答案: