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

时间:2019-12-16 08:26:57

标签: html css

是否有使用HTML / CSS做到这一点的好方法?基本上,这是图像的框架。 我在附加链接中提出了一个粗略的想法,但不确定使用这种方法,请给我建议或解决方案?

https://codepen.io/shahidali/pen/XWJNWQP enter image description here

.image-frame{
  position: relative;
  margin: 100px;
  display: block;
 }
.framed{
  position: absolute;
  top:100px;
  left:90px;
  width:400px;
  transform:rotate(-15deg);
}

1 个答案:

答案 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>