HTML – 创建一个透明的内部？

概述我知道如何在外面创建一个缺口： div:after { content: ''; display: block; width: 20px; height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg);} 但我无法弄清楚如何使用CSS解决这个问题： 凹口必须在容器内 我知道如何在外面创建一个缺口：

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

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',/// 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';}

总结

以上是内存溢出为你收集整理的HTML – 创建一个透明的内部？全部内容，希望文章能够帮你解决HTML – 创建一个透明的内部？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。