如何创建多边形形状div [英] How to create a polygon shape div

问题描述

我想在这里创建HTML元素：

问题是DIV元素有多边形形状而不是正方形，其他元素像弹出窗口和内部的元素，有必要显示一个矩形形状的源，但在网络上显示如填充所有空间包括左侧的三角形。

你认为有没有可能实现，没有准备显示图像作为透明PNG在正确的多边形格式？

解决方案

一种方法是将图像拆分为两个容器，分别是50％父的大小，分别变换它们，并将背景定位为看起来像它们是单个图像。变换可以是偏斜（用于答案）或基于透视的旋转。

请注意，由于我们正在转换容器，因此我们必须应用相反效果到实际图片看起来很正常。

  .image {position：relative; height：150px; width：450px; overflow：hidden;}。top-container，.bottom-container {position：absolute; left：0px;身高：50％宽度：100％; overflow：hidden; backface-visibility：hidden;}。top-container {top：0px; transform-origin：right bottom; transform：skew（-20deg）;}。bottom-container {bottom：0px; transform-origin：right top; transform：skew（20deg）; background-position：0％100％;}。top-container：after，.bottom-container：after {position：absolute; content：'';高度：100％;宽度：100％; left：-14px; / * tan（20）*（height / 2）/ 2 * / background：url（http://lorempixel.com/450/150）; background-size：100％200％;}。top-container：after {top：0px; transform：skew（20deg）;}。bottom-container：after {bottom：0px; transform：skew（-20deg）; background-position：0％100％;} / *只是为demo * / body {background：linear-gradient（90deg，crimson，indianred，purple）;}。 height：150px; width：450px; background：url（http://lorempixel.com/450/150）;}  

 < div class =image> < div class ='top-container'>< / div> < div class ='bottom-container'>< / div>< / div>< !-这是用于比较的实际图片< / h3> div class ='image2'>< / div>  

---

我建议使用SVG和 clipPath ，但由于Persijn已经发布了该示例，我在下面添加了一个不同的版本与 polygon 。

  .vector {position：relative; height：150px; width：450px;} svg {position：absolute; top：0px; left：0px;高度：100％; width：100％;}多边形{fill：url（#image）;} / *只是用于demo * / body {background：linear-gradient（90deg，crimson，indianred，purple）;}  / pre> 
 < div class ='vector'> < svg viewBox ='0 0 450 150'preserveAspectRatio ='none'> < defs> < pattern id ='image'height ='150'width ='450'patternUnits ='userSpaceOnUse'> < image xlink：href ='http：//lorempixel.com/450/150'height ='150'width ='450'/> < / pattern> < / defs> < polygon points = '15,0 450,0 450,150 15,150 0,75'/> < / svg>< / div>  
 

I would like to create HTML element like on image here:

A problem is the DIV element has polygon shape instead of regular rectangle, will be placed above other elements as something like popup and inside that element there is necessary to show an image with rectangular shape in source but showed on web like filling all space included triangle on the left side.

Do you think is there any possibility to realize that without preparing showed images as transparent PNGs in proper polygon format? Only by CSS3 transform or use canvas or SVG?

解决方案

One method could be to split the image into two containers which are 50% the size of the parent, transform each of them separately and position the backgrounds to look like they are one single image. The transform could either be a skew (used in the answer) or a perspective based rotation.

Note that since we are transforming the container, we have to apply the reverse effect to the actual image for it to look normal.

.image {
  position: relative;
  height: 150px;
  width: 450px;
  overflow: hidden;
}
.top-container,
.bottom-container {
  position: absolute;
  left: 0px;
  height: 50%;
  width: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}
.top-container {
  top: 0px;
  transform-origin: right bottom;
  transform: skew(-20deg);
}
.bottom-container {
  bottom: 0px;
  transform-origin: right top;
  transform: skew(20deg);
  background-position: 0% 100%;
}
.top-container:after,
.bottom-container:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: -14px;  /* tan(20) * (height/2) / 2 */
  background: url(http://lorempixel.com/450/150);
  background-size: 100% 200%;
}
.top-container:after {
  top: 0px;
  transform: skew(20deg);
}
.bottom-container:after {
  bottom: 0px;
  transform: skew(-20deg);
  background-position: 0% 100%;
}

/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
.image2 {
  margin-top: 10px;
  height: 150px;
  width: 450px;
  background: url(http://lorempixel.com/450/150);
}

<div class="image">
  <div class='top-container'></div>
  <div class='bottom-container'></div>
</div>


<!-- this is the actual image for comparison -->

<h3>Original Image</h3>
<div class='image2'></div>

---

I was about to suggest usage of SVG and clipPath but since Persijn has already posted that sample, I have added below a different version with polygon.

.vector {
  position: relative;
  height: 150px;
  width: 450px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
polygon {
  fill: url(#image);
}

/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class='vector'>
  <svg viewBox='0 0 450 150' preserveAspectRatio='none'>
    <defs>
      <pattern id='image' height='150' width='450' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/450/150' height='150' width='450' />
      </pattern>
    </defs>
    <polygon points='15,0 450,0 450,150 15,150 0,75' />
  </svg>
</div>

这篇关于如何创建多边形形状div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！