I wanted to recreate the following logo image using only HTML and CSS. For me it was important that the setup supports different font sizes and text content so that I can easily change the logo text and size without any code changes. Solution 1. Setup An HTML Container With Child Elements <a href="/" class="logo__link">
 Piranhas
 Piranhas
 Piranhas
</a> <a href="/" class="logo__link">
 Piranhas
 Piranhas
 Piranhas
</a> My idea was to create 2 child elements containing the same text. I would clip one element to the upper half (.logo__name-top) and the other element to the lower part (.logo__name-bottom). Finally, I will displace the upper part to the left. That's it. .logo__name-top .logo__name-bottom 2. Add CSS Properties To HTML Container .logo__link {
 position: relative;
 color: #ffff00;
 font-family: Outfit, Helvetica, sans-serif;
 font-style: italic;
 font-size: 5rem;
 font-weight: 900;
 text-decoration: none;
} .logo__link {
 position: relative;
 color: #ffff00;
 font-family: Outfit, Helvetica, sans-serif;
 font-style: italic;
 font-size: 5rem;
 font-weight: 900;
 text-decoration: none;
} The position property is needed to allow absolute positioning of the child elements.
The other CSS properties are just used for styling. The position property is needed to allow absolute positioning of the child elements. position The other CSS properties are just used for styling. 3. Add CSS Properties To HTML Child Elements .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% 0% 40% 0%);
} .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% 0% 40% 0%);
} The position property is needed to apply absolute positioning to the .logo__name-top element.
The right property is used to displace the text to the right.
The clip-path property is used to clip the text to the upper 40% and hide the rest. The position property is needed to apply absolute positioning to the .logo__name-top element. position .logo__name-top The right property is used to displace the text to the right. right The clip-path property is used to clip the text to the upper 40% and hide the rest. clip-path .logo__name-bottom {
 position: absolute;
 top: 0;
 right: 0;
 clip-path: inset(60% 0% 0% 0%);
} .logo__name-bottom {
 position: absolute;
 top: 0;
 right: 0;
 clip-path: inset(60% 0% 0% 0%);
} The position property is needed to apply absolute positioning to the .logo__name-top element.
This elements stays where is is and is not displaced.
The clip-path property is used to clip the text to the lower 60% and hide the rest. The position property is needed to apply absolute positioning to the .logo__name-top element. position .logo__name-top This elements stays where is is and is not displaced. The clip-path property is used to clip the text to the lower 60% and hide the rest. clip-path As you can see, there are still some remaining issues. Styling Issues 1. Avoid Clipped Areas For Italic Font Style I needed to extend the clipping area to the right by adding -5% to the clip-path. Otherwise, some part of the text gets clipped away when using italic font style. -5% clip-path .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% -5% 40% 0%);
}
.logo__name-bottom {
 position: absolute;
 top: 0;
 right: 0;
 clip-path: inset(60% -5% 0% 0%);
} .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% -5% 40% 0%);
}
.logo__name-bottom {
 position: absolute;
 top: 0;
 right: 0;
 clip-path: inset(60% -5% 0% 0%);
} 2. Parent Element Does Not Use Any Space Since the child elements are using absolute positioning, they are out of the flow. Therefore, the parent element .logo__linkdoes not take any space and makes positioning the element difficult. You can manually position the parent element but when you change the logo text or size, you would need to manually update the positon of the parent element which is not sustainable. .logo__link Therefore, I added a "pseudo" child element in HTML with class .logo__name-pseudo containing the same text in the same style and size which is hidden just to reserve space for the clipped elements. Now the element reains in the flow. .logo__name-pseudo .logo__name-pseudo {
 visibility: hidden;
} .logo__name-pseudo {
 visibility: hidden;
} 3. Remove Thin Line Between Displaced Elements There remains a thin line between the 2 elements and I couldn't figure out the reason. Eventually, it is a rendering issue. It depends also on the logo size. Sometimes it appears and sometimes not. I decided to extend the upper clip area and clip away just 39% instead of 40% of the bottom part. Therefore, the logos slightly overlap and the line is removed. If you have a better solution, let me know in the comments. 39% 40% .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% -5% 39% 0%);
} .logo__name-top {
 position: absolute;
 top: 0;
 right: 0.05em;
 clip-path: inset(0% -5% 39% 0%);
} Here is the final code on CodePen. Feel free to use. final code on CodePen Originally published on March 13th, 2025 on Philip's Notes. Originally published on March 13th, 2025 on Philip's Notes. Philip's Notes

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

CodePen

Element

Line

Newsletter

🐟 Piranhas

🗺️ Ailola

🔎 Keyword Research

🔗 Link Building

📍 Local Marketing

📣 Digital Marketing

📋 Website Audits

Read My Stories

📊 Competitor Analysis

My personal website

💎 Dictionary Domains

🚀 Authority Domains

Too Long; Didn't Read

Make resilience your competitive advantage

Create A Lightning Text Effect Using HTML And CSS Using This Simple Code

Create A Lightning Text Effect Using HTML And CSS Using This Simple Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Create Incredible Shapes Using the CSS Clip-path Property

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Create Incredible Shapes Using the CSS Clip-path Property

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps