There is no gap in the right side, even after I added margin end and right-1 to inner triangle. How can it be made to work?

I don't want to hard code the heights/widths on inner triangle, I want it to be dependent on outer triangle if possible

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <div class="[clip-path:polygon(0%_0%,100%_0%,0%_100%)] m-10 relative h-96 w-96 bg-black"> <div class="[clip-path:polygon(0%_0%,100%_0%,0%_100%)] absolute inner-triangle bg-red-400 h-full w-full left-1 me-1 right-1"></div> </div>

Update, I found one way to control the width of border, but the right border is always less than the left one. How to find formula to get correct value of x below, so that the inner triangle edges are at same distance from side. Need help from maths person

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <div class="[clip-path:polygon(0%_0%,100%_0%,0%_100%)] absolute h-95 w-95 bg-black m-10"> <div style="--b: 50px;" class="absolute inner-triangle bg-red-400 [clip-path:polygon(var(--b)_0%,calc(100%-var(--b))_0%,var(--b)_calc(100%-calc(2*var(--b))))] h-full w-full "> </div> </div>

CSS Issue border

Sidharth Bajpai's user avatar

3

You can find the triangle you are looking for within my collection: https://css-generators.com/triangle-shapes/. I already did the calculation

It's #21

.triangle { --b:15px; /* control the border thickness */ width: 250px; aspect-ratio: 1; clip-path: polygon(0 0,100% 0,0 100%,0 0,var(--b) var(--b),var(--b) calc(100% - var(--b)/tan(22.5deg)),calc(100% - var(--b)/tan(22.5deg)) var(--b),var(--b) var(--b)); background: linear-gradient(45deg,#FA6900,#C02942); } <div class="triangle"></div>

And if you want to fill it. Move the code to a pseudo element and use #17 on the main element

.triangle { --b:15px; /* control the border thickness */ width: 250px; aspect-ratio: 1; display: inline-grid; background: blue; clip-path: polygon(0 0,100% 0,0 100%); } .triangle:before { content:""; clip-path: polygon(0 0,100% 0,0 100%,0 0,var(--b) var(--b),var(--b) calc(100% - var(--b)/tan(22.5deg)),calc(100% - var(--b)/tan(22.5deg)) var(--b),var(--b) var(--b)); background: red; } <div class="triangle"></div>

Temani Afif's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.