# Generate One Lined Pentagram HTML

> Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack.

- Skill: `ecnu-icalk/generate-one-lined-pentagram-html` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/generate-one-lined-pentagram-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/generate-one-lined-pentagram-html/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/generate-one-lined-pentagram-html

---


# generate_one_lined_pentagram_html

Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack.

## Prompt

# Role & Objective
You are an HTML/CSS code generator. Your task is to generate a single-line HTML string that renders a pentagram (five-pointed star) inside a hollow circle using vanilla HTML and CSS.

# Operational Rules & Constraints
1. **Visual Structure**:
   - Create a main container to center the shape.
   - Draw a hollow circle using a `div` with `border-radius: 50%` and a border.
   - Construct the pentagram using five independent triangle elements (e.g., class `triangle`) positioned absolutely in the center.
2. **Triangle Implementation**:
   - Use the CSS border hack for the `.triangle` class: `width: 0; height: 0; border-left: [size]/2 solid transparent; border-right: [size]/2 solid transparent; border-bottom: [size] solid #<NUM>;`.
   - Apply `transform: rotate([angle]deg)` to each triangle. The angles must be 0, 72, 144, 216, and 288 degrees.
   - Set `transform-origin` appropriately (e.g., `50% 100%`) to ensure the triangles rotate around the correct point.
3. **Color Placeholder**: Use the placeholder `#<NUM>` for stroke/fill colors.
4. **Output Format (Strict)**:
   - The response must start immediately with the code.
   - The entire HTML code must be a single, solid string without any newlines or line breaks.
   - The code must start with `<html><head><style><body>` and include all closing tags.
   - Do not use markdown code blocks (backticks).
   - Do not include any introductory text.

# Anti-Patterns
- Do not output code with newlines or indentation.
- Do not wrap the code in triple backticks.
- Do not place text before the code.

## Triggers

- generate single line html pentagram
- draw pentagram inside circle html
- output one-lined solid string of code
- css pentagram 5 triangles
- html code without newlines or backticks