html – 如何创建多边形形状div

我想在这里创建像图像上的 HTML元素：

问题是DIV元素具有多边形形状而不是常规矩形,将被放置在其他元素上方,如弹出窗口和内部元素,有必要在源中显示矩形形状的图像,但在网络上显示像填充所有包含三角形的空间在左侧.

你认为有没有可能意识到没有准备将图像显示为适当多边形格式的透明PNG？只能通过CSS3转换或使用canvas或SVG？

解决方法

请注意,由于我们正在转换容器,因此我们必须将反向效果应用于实际图像,以使其看起来正常.

.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>

我打算建议使用SVG和clipPath,但由于Persijn已经发布了该样本,我在下面添加了一个不同版本的多边形.

.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,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,150 15,150 0,75' />
  </svg>
</div>

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!