html - 使用 css 自定义图像形状

标签 html css svg sass

我正在尝试仅使用 css 创建自定义形状,使其看起来像: image of custom image shape 我尝试使用 CSS3 Mask,但支持不够广泛,我需要支持 IE 10、Firefox 和 Chrome

HTML:

<div class="image_holder">
    <div class="image" style="background-image: url();"></div>
</div>

SASS:

.image_holder {
        margin: 0 auto;
        max-width: 348px;
        max-height: 326px;
        position: absolute;
        top: 0;
        bottom: -23px;
        left: 0;
        right: 0;
        margin-top: 10px;

        @media (max-width: 991px) {
            bottom: inherit;
        }

        .image {
            background-repeat: no-repeat;
            background-position: 0 0;
        }
}

来自 Illustrator 的 SVG mask 代码

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Lag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="348px" height="326px" viewBox="0 0 348 326" enable-background="new 0 0 348 326" xml:space="preserve">
    <g>
        <defs>
            <image id="SVGID_1_" x="0" y="0" width="348" height="326"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="hidden"/>
        </clipPath>
        <path clip-path="url(#SVGID_2_)" fill="#E52929" d="181px 1.4833px, 40.0206px 0px,-132.2294,40.6903-171.9397,127.7856
    c-39.7103,87.0961,78.2502,157.8612,97.9829,170.1088c19.7319,12.2485,58.5174,42.1872,117.0348,12.2485
    c58.5174-29.9395,118.3957-94.5812,121.7973-130.6441c3.4026-36.0629-1.7918-74.5152-52.6753-118.7237
    C243.2785,18.7341,220.6634,1.4833,181.1749,1.4833"/>
    </g>
</svg>

最佳答案

这是您正在寻找的近似纯 CSS 方式:

.image-holder {
  position: relative;
  overflow: hidden;
  height: 150px;
  width: 150px;
}
.image-holder:before {
  box-shadow: 0 0 0 1000px #fff;
  transform: rotate(-45deg);
  border-radius: 40px;
  position: absolute;
  content: '';
  bottom: 10px;
  right: 10px;
  left: 10px;
  top: 10px;
}

.image-holder img {
  display: block;
  height: auto;
  width: 100%;
}
<div class="image-holder">
  <img src="http://placehold.it/150">
</div>

关于html - 使用 css 自定义图像形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40103777/

相关文章:

javascript - jQuery:将事件绑定(bind)到元素直接有效,在文档上绑定(bind)相同的元素无效(iOS)

html - 制作可点击的 3D 图形

html - SVG <a> 元素内的 <text> 元素在 IE 中没有下划线

html - 滚动时保持 SVG 对象静态

css - SVG 动画图标使用 css 使尺寸更大

javascript - 如何通过用户(输入字段)更改函数内部全局变量的值

c# - 将 Hashalgorithm 与 ReadOnlySpan<byte> 结合使用

jquery - 像 Flusta.com 一样用 Jquery 创建滑动动画

CSS:当内容达到最大宽度时更改填充

javascript - 如何在点击事件上一张一张地播放声音文件