CODEWITHSUNDEEP
javascripthtmlcsssvgcanvas
jrmybeaud
jrmybeaud

Reputation: 33

Creating custom shaped areas in HTML

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>

Upvotes: 0

Views: 111

Answers (2)

Ramesh Tabdar
Ramesh Tabdar

Reputation: 1

* {
  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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272648

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>

Upvotes: 2

Related Questions