制作带边框和填充的菱形图像
Make a rhombus image with border and padding
我想制作一个带有边框和填充的菱形图像。
我设法将图像制作成菱形,但没有成功制作带填充的边框。
我正在使用 elementor builder 并寻找一个不涉及 js 编码的解决方案,只涉及 css。有办法吗??
这就是我要实现的目标:1
您可以使用 clip-path
属性 设置菱形图像的边框。
这是片段 link:https://jsfiddle.net/nk8f5pyg/4/
HTML:
<div class="rhombus-parent">
<img src="https://picsum.photos/id/237/200/300" class="rhombus">
</div>
CSS:
.rhombus{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
width: 300px;
height: 200px;
left: 10px;
top: 10px;
}
.rhombus-parent {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: red;
width: 320px;
height: 220px;
}
父级 Div:
- 首先,您必须将图像包裹在父级 div
- 那个父 div 将充当我们图像的边框
- 增加父 div 宽度和高度,使其略高于图像元素的宽度和高度,使其类似于边框
图片标签:
将图像标签的位置更新为相对位置,以便我们可以重新定位元素
使用 left
和 top
属性将图像中心与父级对齐
我可以使用吗: https://caniuse.com/#search=clip-path
额外有用link:
这是一个只有一个元素的想法:
.box {
width: 150px;
height: 150px;
margin: 60px;
/* this is your border*/
outline: 2px solid;
outline-offset: 15px;
/**/
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.box::before {
content: "";
display: block;
width: 141%;
height: 141%;
flex-shrink:0;
background: center/cover;
background-image: inherit;
transform: rotate(-45deg);
}
body {
background: yellow;
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1003/800/800.jpg)"></div>
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
我想制作一个带有边框和填充的菱形图像。 我设法将图像制作成菱形,但没有成功制作带填充的边框。
我正在使用 elementor builder 并寻找一个不涉及 js 编码的解决方案,只涉及 css。有办法吗??
这就是我要实现的目标:1
您可以使用 clip-path
属性 设置菱形图像的边框。
这是片段 link:https://jsfiddle.net/nk8f5pyg/4/
HTML:
<div class="rhombus-parent">
<img src="https://picsum.photos/id/237/200/300" class="rhombus">
</div>
CSS:
.rhombus{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
width: 300px;
height: 200px;
left: 10px;
top: 10px;
}
.rhombus-parent {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: red;
width: 320px;
height: 220px;
}
父级 Div:
- 首先,您必须将图像包裹在父级 div
- 那个父 div 将充当我们图像的边框
- 增加父 div 宽度和高度,使其略高于图像元素的宽度和高度,使其类似于边框
图片标签:
将图像标签的位置更新为相对位置,以便我们可以重新定位元素
使用
left
和top
属性将图像中心与父级对齐
我可以使用吗: https://caniuse.com/#search=clip-path
额外有用link:
这是一个只有一个元素的想法:
.box {
width: 150px;
height: 150px;
margin: 60px;
/* this is your border*/
outline: 2px solid;
outline-offset: 15px;
/**/
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.box::before {
content: "";
display: block;
width: 141%;
height: 141%;
flex-shrink:0;
background: center/cover;
background-image: inherit;
transform: rotate(-45deg);
}
body {
background: yellow;
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1003/800/800.jpg)"></div>
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>