Creating a transparent internal add-in?

Question

I know how to create an inscription on the outside, for example:

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 thing using only CSS:

The cutout should be inside the container and it should be transparent. Thus, the above solution or image will not solve it.

Maybe it can be created using SVG?

Edit

What I tried 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, obviously, is nothing, because the pseudo-element is not transparent.

Answer 1

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

You will need to combine the SVG clipping paths with CSS cropping and you end up with a not-so-elegant solution.

However, you can create a background image using canvas. Canvas is supported in all major browsers that support HTML5. Backdraw with canvas is what you need to do a bit more coding to create the form. It is not necessary that the image is used instead, but the use of the canvas allows you to keep everything clear (and not blurry, as with the image when it is stretched).

The following solution will give this result (I added a red border to show a transparent area). You can adjust the parameters so that they look exactly as you need, to look and expand it with the arguments to determine the size of the label, the width of the transparent area, etc. The code automatically takes the size of the element specified as an argument.

To add a slot, simply call:

 addNotch(element); 

ONLINE DEMO HERE

The code is simple and 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'; } 

Answer 2

Here is an example of using SVG trimming .

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

Try this script , it should set you on your path for what you are looking for.

 #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

You can use the :before selector for the mask and after for the frame, just set the border-lef and border-bottom property.

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

result:


jsFiddle