Front-end Code serving the US presidential campaign

At the beginning of 12, I participated in a project (which is mainly responsible for implementing the requirements mentioned below). This project targets domestic users in the United States and is mainly used for voting. This project will be used for selection by some people in the United States, including public opinion surveys for the election of the President of the United States and the selection of American star awards. The US team liked to call it faceoff. Well, since the name is a bit arrogant, the design will also sharpen the sword and wipe the gun, the design draft is probably like this. (The project has now been deprecated, and I made a simple look as a reference.) At that time, win8's metro style came out for a while, and similar designs were not uncommon, it is usually an overlay on the image, and some of the text above is covered. overlay is generally hidden (or displays a line of title). When you move the cursor over the image, overlay slides out from one direction, displayed on the image. At the first glance, the design draft is similar to the win8 metro icon. Take a closer look,The intermediate interval is oblique ...... Is oblique ......In this case, there are three problems:

• The image must be a right-angle Trapezoid
• Text Content on the image should also be arranged in the right-angle Trapezoid
• The area to which the mouse is used is also a trapezoid. When the mouse is hovering over the trapezoid area, overlay will come out.

One of the first methods is to use canvas, but after communicating with the team there, they said that they still need to use dom for SEO, but they are allowed to be trapezoid in the advanced browser, low-level browser slices are rectangles. This unconventional front-end requirement is a test for the comprehensive application of front-end knowledge. After some attempts, I finally achieved this requirement. This project has been deprecated and cannot be linked to you. However, I am going to write a simple DEMO for your reference and release it later. But before the DEMO came out, You can use it as a front-end question first to practice it,We often try to implement unconventional front-end requirements to help improve our technology. This article is original by blogger Arfei Zhang. You are welcome to reprint it. Reprinted please note