如何将特定形状应用于div? [英] How to apply a specific shape to a div?

查看:134
本文介绍了如何将特定形状应用于div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这样的形状可以在网站上完成:



不幸的是,我并不完全知道如何做到这一点。



我想过 clip-path ,下面是我试过的一些代码:



HTML(Vue):

  ... 

< / div>

CSS:

  .gallery-cropper {

clip-path:多边形(
100%0%,
100%100%,
10%100% ,
0%0%
);

$ / code>

这给了我(照片不一样,但你得到的东西) :





现在,我需要做左上角的圆角。我必须手动输入所有数千个坐标......?

另外我知道 clip-path isn与IE不兼容。我听说过加载一个手动SVG,但我还需要手动输入所有的坐标吗?并且SVG是否适用于< div>

解决方案

如果图像不会变化太频繁,通过Photoshop将图像应用于图像应该是快速无痛的。如果图像将被有规律地换出,那么为图像创建一个覆盖图更有意义。



以下是使用SVG的示例,但可以使用PNG完成。

.img-overlay {position:relative; max-width:600px; / *防止叠加扩展超出图像的原始宽度* /}。 top:0; left:0;} / *使图像响应。 * /。img-overlay img {max-width:100%;显示:块; height:auto;}

 < div class =img -overlay>< img src =https://unsplash.it/600/400?image=84>< svg xmlns =http://www.w3.org/2000/svgviewBox =0 0 600 400><路径d =M27,71.5a71.43,71.43,0,0,0,2.48,18.73L105,399H-71V0H98.5A71.5,71.5,0,0,0 ,27,71.5Zfill =#b3b3b3/>< / svg>< / div>  


I have this shape to do on a website:

Unfortunately, I don't exactly know how to do it.

I thought about clip-path, here is some code I tried:

HTML (Vue):

...
<div class="col-md-7">
  <q-gallery-carousel class="gallery-cropper" infinite autoplay :src="gallery"></q-gallery-carousel>
</div>

CSS:

.gallery-cropper {

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

Which gives me this (photos are not the same but you get the thing):

Right now, I need to do the top left rounded corner. Do I have to enter all thousands of coordinates manually... ?

Also I know that clip-path isn't compatible with IE. I heard about loading a manual SVG, but again will I have to enter all coordinates manually ? And does a SVG apply to a <div> ?

解决方案

If the image is not going to change too often, applying the shape to the image via Photoshop should be quick an painless. If the image is going to be swapped out somewhat regularly then it makes more sense to create an overlay for the image(s).

Here's an example using an SVG but could be done with PNG.

.img-overlay {
  position: relative;
  max-width: 600px; /* prevents overlay from expanding beyond native width of image */
}
.img-overlay svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* Make image responsive. */
.img-overlay img {
  max-width: 100%;
  display: block;
  height: auto;
}

<div class="img-overlay">
<img src="https://unsplash.it/600/400?image=84">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M27,71.5a71.43,71.43,0,0,0,2.48,18.73L105,399H-71V0H98.5A71.5,71.5,0,0,0,27,71.5Z" fill="#b3b3b3"/></svg>
</div>

这篇关于如何将特定形状应用于div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆