带有剪辑路径的响应式图像 - HTML

【问题标题】：Responsive Image with Clip Path- HTML带有剪辑路径的响应式图像 - HTML
【发布时间】：2017-09-25 17:09:06
【问题描述】：

我需要关于创建带有剪辑路径的图像的建议。这张图片看起来像右上角的高度略低。实际上我是通过使用剪辑路径来完成的，但是在应用边框样式时，我遇到了右角边框半径的问题。谁能给点建议。

html {
  padding: 0;
}

body {
  margin: auto;
  padding: 0;
  width: 80%;
}

div {
  position: relative;
  overflow: hidden;
}

.wholediv img {
  clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%);
}

.wholediv {
  display: block;
  width: 38%;
  clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%);
  border-radius: 16px;
  background-color: blueviolet;
}

<div class="wholediv">
  <img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" />
</div>

【问题讨论】：

标签： css html

【解决方案1】：

您可以尝试border-top-right-radius 为该角设置两个值。顶部缩进使用%，右缩进px：

html {
  padding: 0;
}

body {
  margin: auto;
  padding: 0;
  width: 80%;
}

div {
  position: relative;
  overflow: hidden;
}

.wholediv img {
  clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%);
}

.wholediv {
  display: block;
  width: 38%;
  clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%);
  border-radius: 16px;
  border-top-right-radius: 25% 16px;
  background-color: blueviolet;
}

<div class="wholediv">
  <img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" />
</div>

【讨论】：