Question 206693 in Html Question posted in
Some basic documentation can be found here.

How do I make this shape using HTML and CSS?

I am planning to add a seperator to my website that has this shape and some logos of other sponsored brands next to it.

Sketched this out using inDesign

I want this to be a html block becuase I tried using inDesign to make it and add it to my website as an image but the colors do not match. And also in the future I’m planning to give the individual logos their links.

I tried using inDesign, paint and PS but colors do not match.

Just wondering if this is possible thanks in advance.

Tags:

3

Answers


  1. 0

    try to find out color hexa code and apply that in HTML. Also if u want any updates same as ur code text than uses pre html tag.

    explain your question more frequently so that we can help.

    Login or Signup to reply.
  2. 0

    It is definitely possible to create that shape by using clip-path in CSS.

    If you want to find out more about clip-path:
    https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

    Login or Signup to reply.
  3. 0

    I’m figuring that you’re trying to create this in html and css so I did a quick make an came up with what’s below.

    I created a div which contained the whole divider spanning the width of the screen.
    Inside this I decided to break up the art into a large rectangle for the dark yellow which and a upside down right angle triangle connecting it to make the seamless shape. I then put in a triangle with uneven sides on it to be in the background. There is also a div with a class of logo-box which I left for further addition on your end.

    So here’s my solution:

    :root{
    --dark-yellow: #eaeb87;
    --light-yellow: #f5f6d3;
}

.divider{
    width: 100vw;
    height: 75px;
}

.yellow-box{
    width: 50%;
    height: 75px;
    background-color: var(--dark-yellow);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.yellow-triangle{
    height: 0;
    width: 0;
    border-top: 75px solid var(--dark-yellow);
    border-right: 38px solid transparent;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 50%;
}

.light-yellow-background{
    height: 0;
    width: 0;
    border-top: 75px solid var(--light-yellow);
    border-right: 28px solid transparent;
    border-left: 48px solid transparent;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 47.5%;
}
    <!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
<body>
   <div class="divider">
        <div class="yellow-box"></div>
        <div class="yellow-triangle"></div>
      <div class="light-yellow-background"></div>
        <div class="logo-box"></div>
   </div>
</body>
</html>

    I suggest you tinker with it as it’s not perfect.
    The light yellow triangle in the background layer isn’t quite good for responsiveness to screen size so you should probably tinker with it if you’re not satisfied but if I do come up with a solution for it I will update this answer.

    Hope this helps.

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

Back To Top
Search