CSS to make a picture background filled hexagon

Source: Internet
Author: User
This time to bring you CSS to make a picture of the background of the hexagon, CSS to make a picture of the background of the hexagon to fill the attention of the matter, the following is the actual case, together to see.

The hexagonal implementation principle is actually achieved by rotating three overlapping rectangles, as shown in:

Here in order to get a positive hexagon, two rectangles must be rotated at an angle of -60deg and 60deg, and the rectangular aspect ratio must be MATH.SQRT (3): 1

So first we're going to create a three rectangle:

    <p class= "Hexagon" >        <p class= "Hexagonitem hexagonitem_left" ></p>        <p class= " Hexagonitem hexagonitem_center "></p>        <p class=" Hexagonitem hexagonitem_right "></p>    </p>

We set the width height of the three rectangles to 60px and 104px respectively, the background color is blue, and the. Hexagonitem_left rotation -60deg,.hexagonitem_right rotation 60deg,.hexagonitem_center does not rotate.

      . hexagon {            width:60px;            height:104px;            position:relative;            margin:200px auto;        }        . Hexagonitem {            width:100%;            height:100%;            Background:blue;            Position:absolute;            top:0;            left:0;        }        . Hexagonitem_left {            transform:rotate ( -60deg);        }        . hexagonitem_right {            transform:rotate (60deg);        }

This makes it easy to get a positive hexagon.

So how can we make the blue background into a picture, in fact, it is very simple, the above three rectangles actually just play a role in shaping, in fact, should be set to Visibility:hidden, we need to give three rectangles to add a rectangular sub-element and set to Visibility:visible.

The width and height of the three sub-elements need to cover the previous blue hexagon.

Do the code below, you can do a good study

<! DOCTYPE html>

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How CSS quirks box models and standard box models are used

CSS for accordion layout

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.