Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack.
Scanned 5/30/2026
Install via CLI
Skills Directoryopenskills install ECNU-ICALK/AutoSkill---
id: "6bec26a0-8cc5-4b69-a381-a1fc719dbd9a"
name: "generate_one_lined_pentagram_html"
description: "Generates a single-line HTML string rendering a pentagram (five-pointed star) inside a hollow circle using CSS transformations and the border hack."
version: "0.1.1"
tags:
- "html"
- "css"
- "pentagram"
- "one-line"
- "geometry"
- "code-generation"
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"
---
# 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
No comments yet. Be the first to comment!
