如何从html元素中剪出一个形状答案

【问题标题】：how to cut out a shape from an html element如何从html元素中剪出一个形状
【发布时间】：2016-08-05 17:14:06
【问题描述】：

我已经搜索了 2 天，阅读了剪辑、剪辑路径、蒙版以及有关此 css 主题的所有信息。但我不知道如何实现以下目标：

我有一个红色的身体背景颜色。最重要的是一个全宽、全高的 div，它是白色的。（红色的身体没有显示）。我想从白色 div 中剪出一个形状，以显示一点红色背景。

有谁知道如何做到这一点？

非常感谢！

谢谢

马里奥。

小提琴：https://jsfiddle.net/ecaw94vw/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">


<!--<div class="svgMask" width="0" height="0">
    <svg>
        <defs>
            <mask id="svgmask2">
                <image width="100%" height="100%" xlink:href="assets/images/masks/triangle-1-mask.svg"/>
            </mask>
        </defs>
        <image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="https://dl.dropboxusercontent.com/u/32494584/backdrop.jpg"/>
    </svg>
</div>-->

<div class="mask">

</div>

</div>

</body>
</html>

CSS

 body{
        background:red;
    }
    .mask{
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background: white;
        -webkit-clip-path: polygon(100px 100px, 200px 0px, 500px 500px);
    }

谢谢

【问题讨论】：

您可以发布您的代码或小提琴链接。
你为什么需要这个？

标签： html css

【解决方案1】：

好的，我想我在这里找到了适合您需求的解决方案！

.clip-text {
    font-size: 6em;
    font-weight: bold;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin: .25em;
    padding: .5em .75em;
    text-align: center;
    /* Color fallback */
    color: #fff;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
    position: absolute;
    content: '';
}


.clip-text:before {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
}


.clip-text:after {
    position: absolute;
    z-index: -1;
    top: .125em;
    right: .125em;
    bottom: .125em;
    left: .125em;
    background-color: #000;
}


.clip-text--no-textzone:before {
    background-position: -.65em 0;
}

.clip-text--no-textzone:after {
    content: none;
}

.clip-text--cover,
.clip-text--cover:before {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}

.clip-text_one {
    background-image: url(http://lorempixel.com/480/200/abstract/7);
}

&lt;div class="clip-text clip-text_one"&gt;THIS IS CUT OUT&lt;/div&gt;

【讨论】：

为什么我对这个投了反对票，请解释一下:)
感谢您的回复，但它必须是实际的“剪切”。我需要查看背景，因为背景会发生一些事情。例如：如果你的背景是电影或图像，它需要是可见的。而不是创建具有相同背景颜色的形状。
我刚刚编辑了我的答案，我想我找到了你需要的东西:)