创建透明内凹口？ [英] Creating a transparent inner notch?

问题描述

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

  div：{
 content： '; 
 display：block; 
 width：20px; 
 height：20px; 
 -webkit-transform：rotate（45deg）; 
 transform：rotate（45deg）; 
} 
  

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

>

缺口必须在容器内部，并且必须是透明的。

也许这可以使用SVG来创建？

修改

：

我尝试了

代码直观，执行速度快：

  function addNotch（element）{
 
 ///一些设置
 var canvas = document.createElement ），
 ctx = canvas.getContext（'2d'），
 
 ///获取像素大小元素
 cs = window.getComputedStyle（element），
w = parseInt（cs.getPropertyValue（'width'）||'0'，10），
h = parseInt（cs.getPropertyValue（'height'）||'0'，10），
 
 ///预先计算一些值
 hh = h * 0.5，
 nw = 20，///缺口大小
 nh = nw * 0.5; 
 
 canvas.width = w; 
 canvas.height = h; 
 
 ///绘制主形状
 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（）; 
 
 ///绘制白色箭头
 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（）; 
 
 ///将画布转换为图像并设置元素的背景
 /// with this image 
 element.style.background ='url（'+ canvas.toDataURL（） + 
'）no-repeat left top'; 
 
} 
  

I know how to create a notch on the outside like:

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

But I can't figure out how to solve this thingy using CSS only:

The notch has to be inside of the container and it has to be transparent. So the above solution or an image won't solve it.

Maybe this can be created using SVG?

Edit

What I tried 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;
}

But this is clearly no soultion, because the pseudo element is not tranparent.

解决方案

You cannot do this with pure CSS as clipping is not fully supported yet in all browsers (if cross-compatibility is important).

You would need to combine SVG clipping paths with CSS clipping and would end up with a not so elegant solution.

What you can do however is to create a background image using canvas. Canvas is supported in all the major HTML5 capable browsers. The backdraw with canvas is that you need to do a little more coding to create the shape. Optional an image could have been used instead but using canvas allow you to keep everything sharp (and not blurry as with an image when it is stretched).

The following solution will produce this result (I added red border to show the transparent region). You can tweak the parameters to get it look exactly as you need it to look and extend it with arguments to define size of the notch, width of transparent area etc. The code automatically adopts to the size of the element given as argument.

To add a notch simply call:

addNotch(element);

ONLINE DEMO HERE

The code is straight-forward and performs fast:

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

}

这篇关于创建透明内凹口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！