创造一个透明的内部缺口？

Question

我知道如何在外面创造一个缺口：

div:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

但我无法弄清楚如何使用CSS解决这个问题：

缺口必须在容器内部，并且必须是透明的。所以上面的解决方案或图像都无法解决它。

也许这可以使用SVG创建？

修改

我尝试了is this：

body {
    background: #eee;
}

div {
    position: relative;
    height: 100px;
    width: 200px;
    background: #ccc;
}

div:after {
    content: '';
    position: absolute;
    display: block;
    top: 40px;
    right: -10px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #eee;
}

但这显然不是灵魂，因为伪元素不是透明的。

Answer 1

你不能用纯CSS做到这一点，因为在所有浏览器中还没有完全支持剪辑（如果交叉兼容性很重要）。

您需要将SVG剪切路径与CSS剪辑相结合，最终会得到一个不那么优雅的解决方案。

然而，您可以使用画布创建背景图像。所有主要支持HTML5的浏览器都支持Canvas。使用画布的后退是您需要进行更多编码以创建形状。可选的图像可以替代使用，但使用画布可以让你保持一切清晰（并且在图像被拉伸时不会模糊）。

以下解决方案将产生此结果（我添加了红色边框以显示透明区域）。您可以调整参数以使其看起来完全符合您的需要，通过参数来查看和扩展它，以定义陷波的大小，透明区域的宽度等。代码自动采用作为参数给出的元素的大小。

要添加缺口，只需致电：

addNotch(element);

<强> ONLINE DEMO HERE

代码很简单，执行速度很快：

function addNotch(element) {

    /// some setup
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),

        /// get size of element in pixels
        cs = window.getComputedStyle(element),
        w = parseInt(cs.getPropertyValue('width') || '0', 10),
        h = parseInt(cs.getPropertyValue('height') || '0', 10),

        /// pre-calculate some values
        hh = h * 0.5,
        nw = 20,  /// notch size
        nh = nw * 0.5;

    canvas.width = w;
    canvas.height = h;

    /// draw the main shape        
    ctx.moveTo(0, 0);
    ctx.lineTo(w - nw, 0);
    ctx.lineTo(w - nw, hh - nh);
    ctx.lineTo(w - nw - nh, hh);
    ctx.lineTo(w - nw, hh + nh);
    ctx.lineTo(w - nw, h);
    ctx.lineTo(0, h);
    ctx.closePath();

    ctx.fillStyle = '#7c7058';
    ctx.fill();

    /// draw the white arrow
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#eee';
    ctx.moveTo(w - nw - nw * 0.33, hh - nw * 0.75);
    ctx.lineTo(w - nw - nw * 1.1, hh);
    ctx.lineTo(w - nw - nw * 0.33, hh + nw * 0.75);
    ctx.stroke();

    /// convert canvas to image and set background of element
    /// with this image    
    element.style.background = 'url(' + canvas.toDataURL() +
                               ') no-repeat left top';

}

Answer 2

以下是使用SVG clipping的示例。

jsFiddle Demo

<div></div>
<svg>
  <defs>
    <clipPath id="clipping">
        <polygon points="
             0 0, 202 0,
             202 36, 185 50, 202 64,
             202 102, 0 102" />
    </clipPath>
  </defs>
</svg>

Answer 3

尝试this fiddle out，它应该让您按照自己的意愿行事。

#notched {
     width: 0px;
     height: 0px;
     border-right: 60px solid transparent;
     border-top: 60px solid #d35400;
     border-left: 60px solid #d35400;
     border-bottom: 60px solid #d35400;
}

Updated fiddle

Answer 4

您可以使用:before掩码和after选择器作为边框，只需设置border-lef和border-bottom属性。

div:before {
    content: '';
    position: absolute;
    display: block;
    top: 40px;
    right: -10px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #eee;
}
div:after {
    content: '';
    position: absolute;
    display: block;
    top: 38px;
    right: -5px;
    width: 20px;
    height: 21px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: transparent;
    border-left: 2px solid #eee;
    border-bottom: 2px solid #eee;
}

结果：


jsFiddle