From 5385769b44071d893487644e58b793b26070285e Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 9 May 2024 14:36:59 +0300
Subject: [PATCH] Combine shapes snippets

---
 content/redirects.yaml             |   6 ++
 content/snippets/css/s/circle.md   |  26 -------
 content/snippets/css/s/shapes.md   | 108 +++++++++++++++++++++++++++++
 content/snippets/css/s/triangle.md |  29 --------
 4 files changed, 114 insertions(+), 55 deletions(-)
 delete mode 100644 content/snippets/css/s/circle.md
 create mode 100644 content/snippets/css/s/shapes.md
 delete mode 100644 content/snippets/css/s/triangle.md

diff --git a/content/redirects.yaml b/content/redirects.yaml
index f54ec5628a8..a33472897d3 100644
--- a/content/redirects.yaml
+++ b/content/redirects.yaml
@@ -2905,3 +2905,9 @@
 - from: /css/s/checkerboard-pattern
   to: /css/s/10-css-background-patterns
   status: 301!
+- from: /css/s/circle
+  to: /css/s/shapes
+  status: 301!
+- from: /css/s/triangle
+  to: /css/s/shapes
+  status: 301!
diff --git a/content/snippets/css/s/circle.md b/content/snippets/css/s/circle.md
deleted file mode 100644
index fe384fae391..00000000000
--- a/content/snippets/css/s/circle.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Circle
-type: snippet
-language: css
-tags: [visual]
-cover: oven-paddle
-dateModified: 2020-12-30
----
-
-Creates a circular shape with pure CSS.
-
-- Use `border-radius: 50%` to curve the borders of the element to create a circle.
-- Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse.
-
-```html
-<div class="circle"></div>
-```
-
-```css
-.circle {
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  background: #9C27B0;
-}
-```
diff --git a/content/snippets/css/s/shapes.md b/content/snippets/css/s/shapes.md
new file mode 100644
index 00000000000..c4e239569fd
--- /dev/null
+++ b/content/snippets/css/s/shapes.md
@@ -0,0 +1,108 @@
+---
+title: Create shapes using CSS
+shortTitle: Shapes
+type: story
+language: css
+tags: [visual]
+cover: oven-paddle
+excerpt: Use CSS to create various shapes like circles, triangles, and squares.
+dateModified: 2024-05-08
+---
+
+CSS can be used to create various shapes like circles, triangles, and squares. While this technique is slowly falling out of favor, it can sometimes be worth using for simple shapes, instead of using SVG or images.
+
+https://codepen.io/chalarangelo/pen/gOJOwwo
+
+## Square & Rectangle
+
+A simple CSS square can be created by setting the `width` and `height` to the same value. Similarly, a rectangle can be created by setting the `width` and `height` to different values.
+
+```html
+<div class="square"></div>
+<div class="rectangle"></div>
+```
+
+```css
+.square {
+  width: 64px;
+  height: 64px;
+  background: #5394fd;
+}
+
+.rectangle {
+  width: 128px;
+  height: 64px;
+  background: #5394fd;
+}
+```
+
+## Circle & Ellipse
+
+Using the `border-radius` property, a circle can be created by setting it to `50%`. The `width` and `height` must be the same to create a circle. Subsequently, an ellipse can be created by providing two values for the `border-radius` and setting the `width` and `height` to different values.
+
+```html
+<div class="circle"></div>
+<div class="ellipse"></div>
+```
+
+```css
+.circle {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #5394fd;
+}
+
+.ellipse {
+  width: 128px;
+  height: 64px;
+  border-radius: 64px / 32px;
+  background: #5394fd;
+}
+```
+
+## Triangles
+
+A triangle can be created by using three borders. The `border-width` should be the same for all borders, and the opposite side of where the triangle points towards should have the desired `border-color`. The adjacent borders should have a `border-color` of `transparent`.
+
+```html
+<div class="triangle-down"></div>
+<div class="triangle-up"></div>
+<div class="triangle-left"></div>
+<div class="triangle-right"></div>
+```
+
+```css
+.triangle-down {
+  width: 0;
+  height: 0;
+  border-top: 32px solid #5394fd;
+  border-left: 32px solid transparent;
+  border-right: 32px solid transparent;
+}
+
+.triangle-up {
+  width: 0;
+  height: 0;
+  border-bottom: 32px solid #5394fd;
+  border-left: 32px solid transparent;
+  border-right: 32px solid transparent;
+}
+
+.triangle-left {
+  width: 0;
+  height: 0;
+  border-right: 32px solid #5394fd;
+  border-top: 32px solid transparent;
+  border-bottom: 32px solid transparent;
+}
+
+.triangle-right {
+  width: 0;
+  height: 0;
+  border-left: 32px solid #5394fd;
+  border-top: 32px solid transparent;
+  border-bottom: 32px solid transparent;
+}
+```
+
diff --git a/content/snippets/css/s/triangle.md b/content/snippets/css/s/triangle.md
deleted file mode 100644
index 5059cc868ee..00000000000
--- a/content/snippets/css/s/triangle.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Triangle
-type: snippet
-language: css
-tags: [visual]
-cover: yellow-white-mug-1
-dateModified: 2021-10-13
----
-
-Creates a triangular shape with pure CSS.
-
-- Use three borders to create a triangle shape.
-- All borders should have the same `border-width` (`20px`).
-- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`. The adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
-- Altering the `border-width` values will change the proportions of the triangle.
-
-```html
-<div class="triangle"></div>
-```
-
-```css
-.triangle {
-  width: 0;
-  height: 0;
-  border-top: 20px solid #9C27B0;
-  border-left: 20px solid transparent;
-  border-right: 20px solid transparent;
-}
-```