html - 创建一个透明的内槽口？

Question

我知道如何在外部创建一个缺口，例如：

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

但我不知道如何仅使用 CSS 来解决这个问题：

槽口必须在容器内部并且必须是透明的。所以上面的解决方案或图像不会解决它。

也许这可以使用 SVG 创建？

编辑

我尝试的是这样的：

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);

在线演示在这里

代码直截了当，执行速度很快：

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剪辑的示例。

jsFiddle 演示

<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

试试这个小提琴，它应该会让你走上你正在寻找的道路。

#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;
}

更新的小提琴

Answer 4

您可以使用:beforefor 掩码和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