A
Anonymous

Mission Vision Triangle - Copy this Html, Tailwind Component to your project

The image displays a triangle that has been divided into three horizontal sections, each representing a different part of the triangle's hierarchy. Here's a more detailed description of how the triangle is split: Top Section (Mission): This is the apex of the triangle and is a smaller triangular shape at the very top. The triangle has been horizontally cut to create a clean division between this section and the next. It retains the shape of a typical triangle, pointing upwards, with the edges converging at a single point at the top, and the base aligned with the next section below. Middle Section (Vision): The middle part is trapezoidal, meaning it has a wider base than the top part but is not a full triangle. It forms the midsection of the overall triangle after the top portion has been cut off. This section has been horizontally sliced from the triangle, maintaining the angled sides of the original triangle but with a flat top (the base of the upper "Mission" section) and a wider bottom that leads into the next portion. Bottom Section (Value): The bottom most section of the triangle is the largest, again trapezoidal in shape. This section is much wider than the top two parts, forming the base of the overall triangle. It has straight horizontal cuts at both the top (forming the division between this and the "Vision" section) and at the very bottom, while still retaining the angled sides that follow the original triangular shape. The Overall Structure: The entire triangle is segmented into these three parts by making two horizontal cuts, one between the top and middle sections, and another between the middle and bottom sections. Each section maintains a portion of the triangular shape but becomes progressively wider from top to bottom. Despite these divisions, the sections still align together to form a coherent triangle when viewed as a whole. Each section contains centered text, and the design ensures the text does not overflow the boundaries of the respective sections, keeping the content neatly contained within the triangular divisions.

Prompt
Component Preview

About

Mission Vision Triangle - A segmented triangle with three sections: Mission, Vision, and Value. Built with HTML and Tailwind. Copy component code!

Share

Last updated 1 month ago