如何使用HTML CSS显示附加形状的图像

huangapple
go评论89阅读模式
英文:

How to show image as attached shape using html css

问题

以下是您要翻译的内容：

  1. 我尝试使用线性渐变但无法在左上角实现边框半径。
英文:

如何使用HTML CSS显示附加形状的图像

I tried to do it using linear-gradient but unable to achieve border radius on top left corner.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .img-container {
  2.     background-image: url(&#39;https://loremflickr.com/680/520/car,forest&#39;);
  3.     background-repeat: no-repeat;
  4.     background-size: cover;
  5.     border-radius: 0px 42px 42px 4px;
  6.     position: relative;
  7.     width: 600px;
  8.     height: 320px;
  9.     background-position: 100%;
  10. }
  12. .img-container::before {
  13.     content: &#39;&#39;;
  14.     position: absolute;
  15.     left: 0;
  16.     top: -4px;
  17.     width: 182px;
  18.     height: calc(100% + 2px);
  19.     background: linear-gradient(to top left, transparent 50%, white 50.1%)
  20.       bottom left / 182px no-repeat transparent;
  21. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;img-container&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

  1. 倾斜变换可以在这里有所帮助：
  3. &lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;
  5. &lt;!-- 语言: lang-css --&gt;
  7.     .img-container {
  8.       border-radius: 10px;
  9.       height: 250px;
  10.       width: 400px;
  11.       overflow: hidden;
  12.       transform-origin: bottom;
  13.       transform: skewX(-20deg);
  14.     }
  16.     img {
  17.       display: block;
  18.       width: 100%;
  19.       height: 100%;
  20.       object-fit: cover;
  21.       border-radius: 0px 42px 42px 4px;
  22.       transform-origin: bottom;
  23.       transform: skewX(20deg); /* 反向值在这里 */
  24.     }
  26. &lt;!-- 语言: lang-html --&gt;
  28.     &lt;div class=&quot;img-container&quot;&gt;
  29.       &lt;img src=&quot;https://loremflickr.com/680/520/car,forest&quot;&gt;
  30.     &lt;/div&gt;
  32. &lt;!-- 结束代码片段 --&gt;
英文:

Skew transformation can help here:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .img-container {
  2.   border-radius: 10px;
  3.   height: 250px;
  4.   width: 400px;
  5.   overflow: hidden;
  6.   transform-origin: bottom;
  7.   transform: skewX(-20deg);
  8. }
  10. img {
  11.   display: block;
  12.   width: 100%;
  13.   height: 100%;
  14.   object-fit: cover;
  15.   border-radius: 0px 42px 42px 4px;
  16.   transform-origin: bottom;
  17.   transform: skewX(20deg); /* the opposite value here */
  18. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;img-container&quot;&gt;
  2.   &lt;img src=&quot;https://loremflickr.com/680/520/car,forest&quot;&gt;
  3. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月27日 21:03:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76565160.html
  • css
  • html
  • shapes
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定