CSS <angle-percentage> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS data type represents a value that can be either an or a . It is used in a small number of CSS properties, such as the transform property and the border-radius property.

When an is specified as an angle, it is interpreted as a normal angle value, with the units deg, grad, rad, or turn. When an is specified as a percentage, it is resolved to an angle relative to the element's container element.

For example, the following CSS code will set the element's border radius to be equal to 10% of its container element's width:

.element {
  border-radius: 10%;
}

If the element's container element has a width of 500 pixels, then the element's border radius will be set to 50 pixels.

Another example is the following CSS code, which will rotate the element by 10% of its container element's height:

.element {
  transform: rotate(10%);
}

If the element's container element has a height of 200 pixels, then the element will be rotated by 20 degrees.

The data type can also be used in calc() expressions. For example, the following CSS code will set the element's width to be equal to 50% of its container element's width, minus 10%:

.element {
  width: calc(50% - 10%);
}

This is useful for creating responsive layouts that adapt to different screen sizes.

Overall, the data type is a versatile data type that can be used to specify angles and percentages in a variety of CSS properties.

Syntax

<angle-percentage> = <angle> | <percentage>

Values

<angle>Refer to <angle> for possible values
<percentage>Refer to <percentage> for possible values

Example

CSS

/* angle */
clip-path: polygon(0 50%, 50% 100%, 100% 50%);

/* percentage */
clip-path: polygon(0 50%, 50% 100%, 100% 50%);

/* angle-percentage */
clip-path: polygon(0 calc(50% + 10deg), 50% 100%, 100% calc(50% - 10deg));