Question 262616 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to make shapes using html css

I have above image and i want to make this structure with HTML CSS.
How to make shapes using html css Please any one can help me.

enter image description here

Please help me to create inner structure of like above image by using HTML CSS, Thanks in advance 🙂

Tags:

2

Answers


  1. 0

    Learn about the CSS clip-path property. This allows you to cut elements into shapes. In particular, you’ll want to use polygon(). For example, if I wanted to cut a <div> into a triangle, I could do it like this:

    .someDiv {
  width: 10rem;
  height: 10rem;
  background-color: red;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

    Each comma separated part is an X,Y pair. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path. That should help you get started—you’ll just have to figure out what series of X,Y percentages will create the shape you want (you can cut into either the red shape or the white one—it doesn’t matter).

    Login or Signup to reply.
  2. 0

    Add this to css of the red background div

    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

    You can also generate another from here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search