1.Trapezoids
.png)
if you wanted to create this type design then first you need understand what is it and what it called
-its and trapezoid shapes
Introduction
Trapezoids: A Geometric Shape with a Unique Twist
In the realm of web design, geometric shapes have long been a powerful tool for creating visually appealing and functional layouts. Among these shapes, the trapezoid stands out for its distinctive form and versatility. With its one pair of parallel sides and two non-parallel sides, the trapezoid offers a unique opportunity to break away from traditional rectangular designs.
<section class="trapezoid-section">
<svg width="100%" height="200" viewBox="0 0 100 20">
<polygon points="0,0 100,0 80,20 20,20" fill="#f2f2f2" />
</svg>
<h2>Welcome to Our Website</h2>
<p>This is a creatively shaped section header.</p>
</section>
Whether you're a seasoned web designer or a newcomer to the field, understanding the potential of trapezoids can significantly enhance your design skills. Let's embark on a journey to unlock the creative possibilities of this often-overlooked geometric shape.
Custom TrapXod Maker:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customizable SVG Trapezoid Shape</title>
<style>
/* Styling for the trapezoid container */
.trapezoid {
width: 300px; /* Initial width */
height: 200px; /* Initial height */
position: relative;
overflow: hidden;
margin-bottom: 20px;
border: 1px solid #ddd;
}
/* SVG background shape */
.trapezoid svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Control panel styling */
.controls {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 300px;
}
.control-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.control-group label {
flex: 1;
}
.control-group input {
flex: 2;
}
</style>
</head>
<body>
<div class="trapezoid">
<!-- SVG trapezoid shape with customizable path -->
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- The path will be dynamically updated based on the control values -->
<path id="trapezoidPath" d="M50,0 H250 L200,200 H100 Z" fill="lightblue" stroke="black" stroke-width="2"/>
</svg>
</div>
<!-- Control panel for adjusting path coordinates -->
<div class="controls">
<div class="control-group">
<label for="x1">Top Left X:</label>
<input type="range" id="x1" min="0" max="300" value="50">
</div>
<div class="control-group">
<label for="y1">Top Left Y:</label>
<input type="range" id="y1" min="0" max="200" value="0">
</div>
<div class="control-group">
<label for="x2">Top Right X:</label>
<input type="range" id="x2" min="0" max="300" value="250">
</div>
<div class="control-group">
<label for="y2">Top Right Y:</label>
<input type="range" id="y2" min="0" max="200" value="0">
</div>
<div class="control-group">
<label for="x3">Bottom Right X:</label>
<input type="range" id="x3" min="0" max="300" value="200">
</div>
<div class="control-group">
<label for="y3">Bottom Right Y:</label>
<input type="range" id="y3" min="0" max="200" value="200">
</div>
<div class="control-group">
<label for="x4">Bottom Left X:</label>
<input type="range" id="x4" min="0" max="300" value="100">
</div>
<div class="control-group">
<label for="y4">Bottom Left Y:</label>
<input type="range" id="y4" min="0" max="200" value="200">
</div>
</div>
<script>
// Get references to the path and control elements
const trapezoidPath = document.getElementById('trapezoidPath');
// Coordinate controls
const controls = {
x1: document.getElementById('x1'),
y1: document.getElementById('y1'),
x2: document.getElementById('x2'),
y2: document.getElementById('y2'),
x3: document.getElementById('x3'),
y3: document.getElementById('y3'),
x4: document.getElementById('x4'),
y4: document.getElementById('y4')
};
// Function to update the trapezoid path based on the control values
function updatePath() {
const x1 = controls.x1.value;
const y1 = controls.y1.value;
const x2 = controls.x2.value;
const y2 = controls.y2.value;
const x3 = controls.x3.value;
const y3 = controls.y3.value;
const x4 = controls.x4.value;
const y4 = controls.y4.value;
// Set the new path using updated coordinates
trapezoidPath.setAttribute('d', `M${x1},${y1} H${x2} L${x3},${y3} H${x4} Z`);
}
// Add event listeners to each control
Object.values(controls).forEach(control => {
control.addEventListener('input', updatePath);
});
// Initialize the path on page load
updatePath();
</script>
</body>
</html>
Put Your Thought or Query Here