Please help, I have been facing the same problem for more than 4 days. On the first day I tried all the ways I could think of and on the next three days I tried to get help from (AI) but nothing but a waste of time. I want to learn how to place the text inside its parent, which is a triangle here, and the wall of the triangle acts like a concrete wall, or a glass, so that when we pour water into this glass, the water cannot escape from the glass, and it takes the shape of the container. Now, I want my font to absorb only 5% or more of the water, that is, to grow to the edge of the surface of the triangle, neither overflowing nor going under, but completely It should be clearly seen and fixed there after hitting the surface of the triangle. I actually wanted to recreate one of the most famous posters in the world in terms of font, which I have linked below. I want to learn how to achieve such a state. In these few days, I talked with a lot of (AI) and one of them showed me a way that was very close to what I wanted, but you have to spend a lot of time on it and write everything in the form of error and trial to reach the desired state. So, I came up with the idea of drawing the grid fonts to fit the size of its parent, which here is a shape like a triangle and then make this triangle (transparent) to make it faster, which unfortunately I haven’t been able to do it yet. I must say at the end that my codes are not finished and thank you very much for reading this text.
One of the most famous pieces of constructivist art is the above “Books! Across All Branches of Knowledge” by Alexander Rodchenko (1924). sorry this site cant accept any kind of links.
ILM
March 4, 2026, 9:46pm
2
please post the code you are talking about and the image you are referring to
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio</title>
<link rel="stylesheet" href="./styles.cs" />
</head>
<body>
<header>
<nav id="navbar">
<a
href="#about"
class="nav-bar"
><strong>About</strong>
</a>
<a
href="#work"
class="nav-bar"
><strong>Work</strong>
</a>
<a
href="#contact"
class="nav-bar"
><strong>Contact</strong>
</a>
</nav>
</header>
<main>
<div id="welcome-section">
<div class="top">
<div class="white-line1"></div>
<div class="white-line2"></div>
<div class="taper-text">
<div class="triangle">
<h1>
<span>H</span><span>i</span>
<!-- <span>H</span><span>i</span><span> </span>
<span>I</span><span>'</span><span>m</span><span> </span>
<span>T</span><span>H</span><span>A</span><span>N</span>
<span>A</span><span>T</span><span>O</span><span>S</span> -->
</h1>
</div>
</div>
</div>
<div class="bottom" >
<p>
Artist crafting dense, dynamic line constructions
inspired by Russian Constructivism —
channeling geometric energy into personal abstract systems.
Currently building in web design.
</p>
</div>
</div>
<div
id="project-section">
<section
id="work">
<div>
<h2 class="project-tile">My FreeCodeCamp porject in(HTML)and(CSS)</h2>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/newspaper-project/"><img
src="https://i.postimg.cc/jSYg8LMC/Screenshot-16.png">
<img
src="https://i.postimg.cc/hjqQ6QXs/Screenshot-25.png">
</a>
<a
id="profile-link"
href="https://thanatos-constructivism.github.io/freecodecamp-projects/newspaper-project/"
rel="newspaper layout"
target="_blank"
>Newspaper Layout</a>
</figure>
<figcaption>Newspaper Layout</figcaption>
</div>
<div>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/online-shop/" ><img
src="https://i.postimg.cc/44KWszM9/Screenshot-19.png">
<img
src="https://i.postimg.cc/WbLCyW33/Screenshot-24.png">
</a>
<a
href="https://thanatos-constructivism.github.io/freecodecamp-projects/online-shop/"
rel="online shop"
target="_blank"
>Philosophy Online Shop</a>
</figure>
<figcaption>Philosophy Online Shop</figcaption>
</div>
<div>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/playing-cards/" ><img
src="https://i.postimg.cc/mkJLxQtN/Screenshot-20.png">
</a>
<a
href="https://thanatos-constructivism.github.io/freecodecamp-projects/playing-cards/"
rel="Playing Cards Deck"
target="_blank"
>Playing Cards Deck</a>
</figure>
<figcaption>Playing Cards Deck</figcaption>
</div>
<div>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/moon-orbit/" ><img
src="https://i.postimg.cc/Yqx7zKxb/Screenshot-21.png">
</a>
<a
href="https://thanatos-constructivism.github.io/freecodecamp-projects/moon-orbit/"
rel="Moon Orbit Animation"
target="_blank"
>Moon Orbit Animation</a>
</figure>
<figcaption>Moon Orbit Animation</figcaption>
</div>
<div>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/book-inventory/" ><img
src="https://i.postimg.cc/7YZsdF4y/Screenshot-22.png">
</a>
<a
href="https://thanatos-constructivism.github.io/freecodecamp-projects/book-inventory/"
rel="Book Inventory Table"
target="_blank"
>Book Inventory Table</a>
</figure>
<figcaption>Book Inventory Table</figcaption>
</div>
<div>
<figure>
<a href="https://thanatos-constructivism.github.io/freecodecamp-projects/technical-documentation/" ><img
src="https://i.postimg.cc/2yMZHLmh/Screenshot-23.png">
</a>
<a
href="https://thanatos-constructivism.github.io/freecodecamp-projects/technical-documentation/"
rel="Technical Documentation"
target="_blank"
>Technical Documentation</a>
</figure>
<figcaption>Technical Documentation</figcaption>
</div>
</section>
<section
id="sketch">
<h2>My sketch design</h2>
<div>
<figure>
<img
src="https://i.postimg.cc/4NdCV8WF/IMG-20220606-213816629A.jpg">
</figure>
</div>
<div>
<figure>
<img
src="https://i.postimg.cc/NjNTz0t2/IMG-20220606-220232-494A.jpg">
</figure>
</div>
<div>
<figure>
<img
src="https://i.postimg.cc/vZwSZ3xq/IMG-20220606-213941645-HDRA.jpg">
</figure>
</div>
<div>
<figure>
<img
src="https://i.postimg.cc/vH0LphL6/IMG-20220606-214110357A.jpg">
</figure>
</div>
<div>
<figure>
<img
src="https://i.postimg.cc/bJ3vRp58/IMG-20220606-213907912A.jpg">
</figure>
</div>
<div>
<figure>
<img
src="https://i.postimg.cc/fTXJGntr/IMG-20220606-213748496A.jpg">
</figure>
</div>
</section>
</div>
</main>
<footer>
</footer>
</body>
</html>
:root {
--color1: #fff;
--color2: #000;
}
html {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
padding: 0;
margin: 0;
}
#navbar {
width: 50%;
height: 5rem;
background-color: transparent;
display: flex;
justify-content: space-evenly;
position: relative;
top: 1rem;
left: 50%;
}
.nav-bar {
font-size: 1rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color2);
}
a {
text-decoration: none;
color: var(--color1);
}
a:hover {
background-color: #333;
color: var(--color1);
}
img {
width: 100%;
height: auto;
max-width: 300px;
}
#welcome-section {
width: 100%;
overflow: visible;
margin-top: 2rem;
margin-bottom: 2rem;
}
h1 {
font-size: 4rem;
color: var(--color1);
margin-top: 5rem;
text-align: center;
transform: rotate(-7deg);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
right: 5rem;
top: -3rem;
}
p {
font-size: 2rem;
color: var(--color1);
margin-top: 7rem;
text-align: center;
transform: rotate(-7deg);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.top {
position: relative;
min-height: 33.2rem;
max-height: 33.2rem;
padding: 2rem;
}
.top::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--color2);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15rem), 0 100%);
z-index: 0;
}
.bottom {
position: relative;
min-height: 20rem;
padding: 2rem;
margin-top: calc(5px - 15rem);
}
.bottom::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--color2);
clip-path: polygon(0 15rem, 100% 0, 100% 100%, 0 100%);
z-index: 0;
}
.taper-text {
position: relative;
width: 100%;
max-width: 900px;
margin: 4rem auto;
perspective: 1200px;
}
.taper-text h1 {
margin: 0;
padding: 2rem 1rem;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
color: var(--color1);
font-weight: 900;
background: transparent;
transform: skewX(20deg);
}
.taper-text h1::before {
content: '';
position: absolute;
inset: 0;
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
background: transparent;
z-index: -1;
}
.taper-text span:nth-child(1) { font-size: 15rem; }
.taper-text span:nth-child(2) { font-size: 13rem; }
.taper-text span:nth-child(3) { font-size: 11rem; }
.taper-text span:nth-child(4) { font-size: 9rem; }
.taper-text span:nth-child(5) { font-size: 7rem; }
.taper-text span:nth-child(6) { font-size: 5rem; }
.taper-text span:nth-child(7) { font-size: 3rem; }
.taper-text span:nth-child(8) { font-size: 2.4rem; }
.taper-text span:nth-child(9) { font-size: 2.1rem; }
.taper-text span:nth-child(10) { font-size: 1.8rem; }
.taper-text span:nth-child(11) { font-size: 1.5rem; }
.taper-text span:nth-child(12) { font-size: 1.2rem; }
.taper-text span:nth-child(13) { font-size: 0.9rem; }
.taper-text span:nth-child(14) { font-size: 0.6rem; }
.taper-text span:nth-child(15) { font-size: 0.3rem; }
.white-line1 {
width: 700px;
height: 200px;
background-color: var(--color1);
top: -150px;
left: -50px;
position: absolute;
transform: rotate(-8deg);
z-index: 2;
}
.white-line2 {
width: 700px;
height: 5px;
background-color: var(--color1);
position: absolute;
transform: rotate(-38deg);
left: 200px;
top: 84px;
z-index: 2;
}
.triangle {
clip-path: polygon(50% 0%, 100% 100%, 0% 200%);
background-color: red;
width: 250px;
height: 250px;
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform: rotate(-115deg);
left: -17rem;
top: 6rem;
}
.triangle h1 {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow: hidden;
transform: rotate(100deg);
font-size: 1rem;
line-height: 1;
white-space: normal;
top: 4rem;
left: 1rem;
}
.triangle h1 span {
display: inline;
font-size: 0.8rem;
padding: 0;
margin: 0;
}
ILM
March 5, 2026, 9:26am
7
is that the name of your css file?
No, that’s a mistake. It’s because I changed my files many times in the past few days, and to avoid confusion, I changed the names a little, and at the last moment when I sent it to you, I forgot to change it.
ILM
March 5, 2026, 10:24am
9
Maybe there is a way, but I can’t figure it out. Maybe using transform? I have not tried that
system
April 2, 2026, 10:24am
10
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
