CSS clip-path Recortes

CSS `clip-path Recortes`

La propiedad CSS clip-path proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es circle(). La propiedad clip-path reemplaza la ahora deprecada propiedad clip.

/* Valores clave */
clip-path: none;

/* Valores de imagen */ 
clip-path: url(resources.svg#c1);

/* Valores de caja */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Valores geometricos */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Valores Geometricos y de caja combinados */
clip-path: padding-box circle(50px at 0 100px);

/* Valores globales */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Valor inicial	`none`
Applies to	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
Heredable	no
Percentages	refer to reference box when specified, otherwise border-box
Media	visual
Valor calculado	as specified, but with `url` values made absolute
Animation type	yes, as specified for `basic-shape`, otherwise no
Canonical order	el orden único no-ambigüo definido por la gramática formal

SyntaxSección

ValoresSección

url()

Represents a URL referencing a clip path element.

inset(), circle(), ellipse(), polygon()

A <basic-shape> function. Such a shape will make use of the specified <geometry-box>to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.

<geometry-box>

If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path. The geometry box can be one of the following values:

fill-box: Uses the object bounding box as reference box.
stroke-box: Uses the stroke bounding box as reference box.
view-box: Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
margin-box: Uses the margin box as the reference box.
border-box: Uses the border box as the reference box.
padding-box: Uses the padding box as the reference box.
content-box: Uses the content box as the reference box.

none

There is no clipping path created.

Formal syntaxSección

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where 
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where 
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

ExamplesSección

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sampleSección

HTMLSección

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSSSección

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

ResultSección

Specifications

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

CSS clip-path Recortes