How do you make a css box with angles?

Question

Polygon Shape

Hi I am trying to make an angled polygon shape? I'm wondering if anyone can point in the right direction? Would it be a transform method like skew and then scale? Sorry, new to polygon shapes

Thanks in Advance,

Edward

Answer 1

Not quite sure how you plan to use this but there are a few different ways you can create polygon shapes.

Here are two ways:

1. using background: linear-gradient() and playing with a number of gradients, angles and stop position.
2. Using ::after pseudo element and forcing it to become a scalene triangle with the border color trick

.polygon {
    background: linear-gradient(-14deg, #ddd 21%, transparent 0), linear-gradient(30deg, #ddd 15%, gold 0);
    height: 300px;
    width: 500px;
}

.polygon2 {
    background: gold;
    width: 500px;
    height: 200px;
    position: relative;
}

.polygon2::after {
    content: '';
    border-left: 150px solid transparent;
    border-right: 350px solid transparent;
    border-top: 80px solid gold;
    position: absolute;
    height: 0;
    top: 100%;
    width: 0;
}

<div class="polygon"></div>

<hr>

<div class="polygon2"></div>