是否有使用HTML / CSS做到这一点的好方法?基本上,这是图像的框架。 我在附加链接中提出了一个粗略的想法,但不确定使用这种方法,请给我建议或解决方案?
https://codepen.io/shahidali/pen/XWJNWQP
.image-frame{
position: relative;
margin: 100px;
display: block;
}
.framed{
position: absolute;
top:100px;
left:90px;
width:400px;
transform:rotate(-15deg);
}
答案 0 :(得分:1)
1。您可以使用border-image
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
}
<p id="borderimg1">Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>
<p id="borderimg2">Here, the image is stretched to fill the area.</p>
> Refrence: https://css-tricks.com/understanding-border-image/
2。您可以使用gradient
来做到这一点(没有那么精确,只有一个接近)
.wave-top {
position: relative;
margin-top: 20px;
}
.wave-top::before,
.wave-top::after {
border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave-top::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image: radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px);
}
.wave-top::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image: radial-gradient(circle at 10px 26px, rgba(237, 30, 30, 1) 20px, transparent 21px);
}
.wave-mid {
background-color: rgba(237, 30, 30, 1);
height: 50px;
}
.wave-bottom {
position: relative;
}
.wave-bottom::before,
.wave-bottom::after {
border-top: 5px solid rgba(237, 30, 30, 1);
}
.wave-bottom::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image: radial-gradient(circle at 10px -15px, transparent 20px, #fff 21px);
}
.wave-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image: radial-gradient(circle at 10px 26px, #fff 20px, transparent 21px);
}
<div class='wave-top'></div>
<div class="wave-mid"></div>
<div class="wave-bottom"></div>