<figure class="triangle">
</figure>
@use "sass:math";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
body {
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 1rem;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
gap: 1rem;
place-content: center;
}
@mixin triangle($size) {
$angle: 60deg;
$adjacent: $size / 2;
$startPos: (50% - $size / 2);
$endPos: (50% + $size / 2);
$opposite: math.tan($angle) * $adjacent;
clip-path: polygon(
$startPos $endPos,
($startPos + $adjacent) (50% - $opposite / 2),
$endPos $endPos
);
}
$hypotenuse: 60%; //side length
$angle: 60deg;
$adjacent: $hypotenuse / 2;
$opposite: math.sin($angle) * $hypotenuse;
.triangle {
width: min(20rem, 90vw);
height: min(20rem, 90vw);
position: relative;
background: whitesmoke;
border: 1px solid lightgrey;
&::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, deeppink, orange);
clip-path: polygon(
0 $opposite,
($hypotenuse / 2) 0,
$hypotenuse $opposite
);
}
}
View Compiled
/*
Math.sin(θ) = opposite / hypotenuse
Math.cos(θ) = adjacent / hypotenuse
Math.tan(θ) = opposite / adjacent
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.