Creating custom shaped areas in HTML

Question

For a projet I need to make a page with three areas each shaped differently.

Like this :

The contact point must always be in the middle of the page and each area has an image as a background. Clicking anywhere on a specific area redirects you to another page.

I already tried with SVG but I can't get the image to keep the same aspect ratio but the SVG to resize according to the page

html, body {
    margin: 0;
    height: 100%;
}

svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">

    <pattern id="image" patternUnits="userSpaceOnUse" width="1920" height="1080" x="0" y="0">
        <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMax slice"/>
    </pattern>

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard">
            <polygon id="top" points="960 540 0 2.27373675e-13 1920 0" fill="red"></polygon>
            <polygon id="left" points="960 1080 0 1080 0 0 960 540"></polygon>
            <polygon id="bottom" points="960 1080 960 540 1920 0 1920 1080" fill="blue"></polygon>

            <use href="#left" fill="url(#image)"></use>

        </g>
    </g>
</svg>

so what is the point of the colors if there are pictures in front? are you planning on adding opacity: 0.5? — Lorddirt
– Lorddirt, Commented Jul 10, 2018 at 9:55
well, it does look good, doesn't it? what exactly is the problem? — wayneOS
– wayneOS, Commented Jul 10, 2018 at 9:56
@wayneOS The problem is that the picture's aspect ratio changes when you resize the window — jrmybeaud
– jrmybeaud, Commented Jul 10, 2018 at 10:02

Temani Afif · Accepted Answer · 2018-07-10 10:04:31Z

2

I would consider clip-path and background for the images

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

.left,
.right {
  width: 50%;
}

.top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: url(https://picsum.photos/800/500?image=1069) center/cover;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.left {
  background: url(https://picsum.photos/800/500?image=1060) center/cover;
}

.right {
  background: url(https://picsum.photos/800/500?image=1050) center/cover;
}

<div class="top">
</div>
<div class="left">
</div>
<div class="right">
</div>

answered Jul 10, 2018 at 10:04

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jrmybeaud Over a year ago

Thank you this is exactly what I was looking for. Nonetheless do you know any other way with better browser support?

Temani Afif Over a year ago

@jrmybeaud with background image it's a bit difficult, but if the background are static color yes I know

Roshana Pitigala · Accepted Answer · 2018-07-10 10:52:33Z

0

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.main-wrap {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.main-wrap section a {
  width: 100%;
  height: 100%;
  display: block;
}

.main-wrap section[role="s1"] {
  background: #333;
  width: 100%;
  height: calc(50vh);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.main-wrap section a img {
  width: 100%;
  height: auto;
}

.main-wrap section[role="s2"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
}

.main-wrap section[role="s3"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #eee;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
}

<div class="main-wrap">
  <section role="s1">
    <a href="https://picsum.photos/1200/600">
      <img src="https://picsum.photos/1200/600" alt="">
    </a>
  </section>
  <section role="s2">
    <a href="https://picsum.photos/600/1200/?gravity=east">
      <img src="https://picsum.photos/600/1200/?gravity=east" alt="">
    </a>
  </section>
  <section role="s3">
    <a href="https://picsum.photos/600/1200/?random">
      <img src="https://picsum.photos/600/1200/?random" alt="">
    </a>
  </section>
</div>

edited Jul 10, 2018 at 10:52

Roshana Pitigala

8,8569 gold badges53 silver badges87 bronze badges

answered Jul 10, 2018 at 10:39

Ramesh Tabdar

11 bronze badge

1 Comment

Roshana Pitigala Over a year ago

While this may answer the question it's better to add some description on how this answer may help to solve the issue. Please read How do I write a good answer to know more.

Collectives™ on Stack Overflow

Creating custom shaped areas in HTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related