Positioning triangles inside an element with CSS pseudo elements

100%

Positioning triangles inside an element with CSS pseudo elements

✓ Published0🌍 Public

Last edited Jan 18, 2018

Created on Jan 18, 2018

This example demonstrates how to add directional arrows to a UI component using only CSS pseudo-elements, with no JavaScript or external libraries. The `.pill` element is styled with a relative position, while its `::before` and `::after` pseudo-elements each create a small triangular arrow on the left and right sides, respectively, using bordered boxes with transparent top and bottom borders. The triangles are vertically centered and offset from the edges using absolute positioning and margin values, simulating a callout or slider control. The code relies entirely on native CSS properties like `border-top`, `border-bottom`, and `margin-top` to construct the shapes.

AI-generated description

Similar vizzes

Loading thumbnail…

HTML

This example demonstrates how to embed a minimal Scalable Vector Graphics (SVG) triangle directly into an HTML document, with no additional libraries or frameworks. It shows a basic polygon element defined by three coordinate points, rendered inline within the page’s body. The HTML file contains only standard markup, using the `<svg>` and `<polygon>` tags with fixed numeric attributes to shape the triangle. The rendering relies on the browser’s native SVG support, with a simple static illustration rather than any interactive or data-driven behavior.

Iislwynw

60% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles and rectangles—with inline fill attributes, alongside grouped elements that inherit styling and a polyline path. The code uses raw SVG elements and CSS classes, where the `.lines` class applies stroke properties and the `.lines path` rule adds a red rounded stroke. A `<g>` element with a transform attribute shifts a pink-and-black group of shapes, while CSS sets the page margin and overflow. No JavaScript libraries are involved; the rendering relies solely on SVG markup and stylesheet rules.

RRobindj2000

59% match

Loading thumbnail…

Svg

This example shows two overlapping triangles rendered inside a 500×500 pixel SVG canvas with a light pink background. The first red triangle spans from the top-left to the center, while the second green triangle points downward, creating a stylized bow-tie or hourglass shape when combined. The graphic is built using raw SVG markup in an HTML file, with the `path` element defining each polygon’s vertices via the `d` attribute. CSS styles the canvas background, while SVG attributes `fill` and `stroke` set the triangles’ colors and outlines. No JavaScript is used; the rendering relies entirely on the browser’s native SVG support.

PParna Saeidpour

59% match

Loading thumbnail…

Triangle Chart using SVG Path Command

The triangle chart uses two SVG <path> elements to draw filled triangular forms. The first path, filled with a dark blue, traces a large triangle; the second, lighter blue path overlays a smaller, inset triangle. Both paths are defined using the SVG `d` attribute with relative (`l`) and absolute (`L`) line commands. The code is straightforward, with no external libraries, and uses the inline `<svg viewBox>` coordinate system to position shapes.

PPeter Cordone

59% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how simple geometric shapes can be composed and styled using SVG elements and CSS. It shows two circles and two rectangles arranged on a canvas, with a lime stroke applied to one group and a hotpink line and path rendered as part of a separate group. The code uses raw SVG markup within an HTML page, along with a linked stylesheet that applies global typography and group-specific styling, such as stroke color and width, as well as a round line join for the path.

AAnnie Liao

58% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403

58% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling and grouping controlled through CSS and SVG attributes. It shows two circles and two rectangles, using explicit fill colors on some shapes and applying a blue fill to a grouped set of shapes via the SVG `<g>` element’s transform and fill attributes. The code uses raw SVG markup within an HTML document, linking to an external stylesheet that sets the body margin and overflow. No JavaScript libraries are involved; the rendering relies entirely on native SVG and CSS.

TTiff

58% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circle, rect, line, and path—can be styled and composed using CSS and SVG attributes. It shows grouped elements with transformed positions, inherited fill and stroke properties, and class-based styling for lines and paths. The code uses raw SVG markup with inline presentation attributes like `fill`, `stroke`, and `stroke-width`, combined with CSS rules targeting classes such as `.lines`. The rendering is purely SVG, with no external libraries, and the page layout is simplified through CSS margin resets.

TTebid Quinsy

58% match