CSS Shapes

CSS Shapes

shape-outside & shape-image-threshold

<img class=”element” src=”image.png” />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

https://www.html5rocks.com/en/tutorials/shapes/getting-started/

clip-path

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

mask & mask-borde

https://www.html5rocks.com/en/tutorials/masking/adobe/

img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}

img {
  -webkit-mask-box-image: url("stamp.svg") 35 repeat;
  mask-border: url("stamp.svg") 35 repeat;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---