我知道如何在外面创建一个缺口：
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;
}
但这显然没有灵魂,因为伪元素不是透明的.
解决方法
你不能用纯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',/// 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,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';
}
