Use CSS borders for small triangles, arrows, and pointers; use a positioned pseudo-element with transform: skewY() for a broad, responsive sloped section edge. These approaches create the effect without transforming the text inside the section.
How CSS borders create diagonal edges
CSS borders meet at corners. When adjacent borders have different colors, the join forms a diagonal. You can use that geometry to draw a triangle by setting an element’s width and height to zero, making its side borders transparent, and coloring the border that should form the visible shape.
.triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid #000;
border-left: 10px solid transparent;
}This example makes an upward-pointing triangle. Its visible height comes from the colored border width; the transparent side-border widths control how wide the base is and therefore affect the slope. Change which border is colored to point the triangle in another direction.
Build an arrow or pointer
A triangle can be an independent element or a pseudo-element attached to a button, tab, or callout. For a more elaborate arrow or compass-like control, layer and position multiple triangles. Keep the decorative shape separate from the control’s accessible name and interaction; the triangle itself does not communicate meaning to assistive technology.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Create a sloped section edge with a pseudo-element
For a wide diagonal at the top or bottom of a section, place a skewed pseudo-element over the edge. The pseudo-element is transformed, not the section’s text, so the content remains unskewed. A broad pseudo-element can span the container as its width changes.
.section {
position: relative;
overflow: hidden;
}
.section::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: #000;
transform: skewY(-5deg);
transform-origin: 100% 100%;
}Here, the bottom edge is sloped by skewY(-5deg), with the transform anchored at the bottom-right corner. For a top edge, position the pseudo-element at the top and adjust the angle and transform origin to put the slope on the intended side. The tutorial’s example uses skewY(5deg) for a top edge and skewY(-5deg) with transform-origin: 100% 100% for a bottom edge. Test the result at the actual container widths and content heights you expect; a fixed pseudo-element height may need adjustment for your design.
Which CSS angle technique should you use?
| Need | Border triangle | Skewed pseudo-element |
|---|---|---|
| Small arrow, pointer, or tab detail | Concise; border widths define the shape. | Usually more setup than needed for a simple triangle. |
| Wide section divider or overlay | May require dimension tuning or multiple shapes. | Fits broad edges and can span a responsive container. |
| Direct angle adjustment | Indirect: change border widths to change the slope. | Explicit: set the angle in skewY(). |
| Keep text undistorted | Use a separate element or pseudo-element. | Transform the pseudo-element rather than the content container. |
| Markup and fallback simplicity | Can use one small element or pseudo-element. | Uses a pseudo-element; complex shapes may need layered elements or another graphics technique. |
A separate CSS reference also demonstrates constructing shapes with skewX(), skewY(), rotate(), borders, and pseudo-elements: CSS Shapes of CSS. For current browser compatibility, check the specific CSS features you plan to use against up-to-date compatibility data; the cited tutorial does not provide a current support matrix.
Can CSS angles replace decorative images?
For a simple decorative wedge or sloped edge, CSS avoids using an image file for that shape. Tim Wright’s SitePoint tutorial says the CSS is “usually lighter” than an equivalent image “at least 99% of the time,” but supplies no independent performance study, sample size, or benchmark for that figure. Treat it as the author’s assertion, not a measured industry statistic. Actual page weight depends on the implementation and the image being compared.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
What the original CSS Angles tutorial covers
Tim Wright’s SitePoint tutorial, “CSS Angles: Just the Edge Your Web Page Needs!”, was published on December 3, 2008, and the page records an update on November 7, 2024. It demonstrates border intersections, a navigation “shelf” built around a semantic unordered list, and sloped edges made with positioned pseudo-elements and transforms. Its discussion of proposed rotation and rotation-point properties belongs to the article’s historical CSS3 context; it is not evidence that those properties are current production features.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
