html - 是否可以使用 CSS 制作此框架

Question

是否有使用 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);
}

Answer 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>