带边框的定位徽标

Question

im试图将设计转换为带有html和css的代码，但是im陷入了英雄部分的一部分。将该徽标定位在边框周围的最好方法是什么。

随附的图片是我要重新创建的设计的图片

Answer 1

您可以在上课之前和之后使用

::before和::after，然后将边框和位置添加到左右角的顶部。

*{
  margin: 0; padding: 0; box-sizing: border-box;
}
body{
  font-family: Arial , Helvetica;
}
.banner-container{
  min-height: 600px; height: 100vh; background-image: linear-gradient(to bottom, rgba(60, 53, 39, 0.6), rgba(60, 53, 39, 0.7)), url("https://images.pexels.com/photos/2015972/pexels-photo-2015972.jpeg?cs=srgb&dl=affection-baby-child-2015972.jpg&fm=jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.banner-wrap{
  margin: 0 auto; max-width: 960px; height: 100%; display: flex; align-items: center; justify-content: center;
}
.banner-box{
  border-bottom: solid #A58758 4px; border-left: solid #A58758 4px; border-right: solid #A58758 4px; width: 500px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 50px; margin-top: 100px;
}
.banner-box::before{
  content: "";
  width: 127px;
  border: solid #A58758 2px; 
  position: absolute;
  top: -4px;
  left: -4px;
}
.banner-box::after{
  content: "";
  width: 127px;
  border: solid #A58758 2px; 
  position: absolute;
  top: -4px;
  right: -4px;
}
.banner-box img{
  position: absolute; top: -135px; padding: 5px;
}
.banner-box h2{
  color: #fff; font-size: 2.5rem;
}
.banner-box h1{
  color: #fff; margin: 5px 0; text-transform: uppercase; font-weight: 400; font-size: 3.8rem; letter-spacing: .4rem;
}
.banner-box h3{
  color: #A58758; text-transform: uppercase; font-size: 2.3rem; font-weight: 400; letter-spacing: .6rem;
}
a{
  background: #A58758; color: #fff; text-decoration: none; text-transform: uppercase; padding: 15px 25px; position: absolute; bottom: -25px; letter-spacing: .1rem;
}

<div class="banner-container">
  <div class="banner-wrap">
    <div class="banner-box">
      <img src="https://www.thorndalemanors.com/wp-content/uploads/2019/01/thorndale-footer.svg">
      <h2>Refined Luxury</h2>
      <h1>Singles</h1>
      <h3>In Brampton</h3>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

检查其正常工作

Answer 2

这就是我要做的：

• 带有两个子元素的包装元素（.box-border）：.box-border__top和.box-border__img
• 在.box-border上放置边框，但没有顶部边框
• 对于顶部边框，请使用由三个元素组成的.box-border__top：
  • .box-border__top:before：一行
  • .box-border__img：徽标，在中心对齐
  • .box-border__top:after：一行
• 要在图像周围添加间距，请将.box-border__content与padding: 5em一起使用

body {
  background: url(https://www.goodfreephotos.com/albums/vector-images/farm-landscape-illustration-vector-graphics.png);
  background-size: cover;
}

.box-border { /* All side borders by the top */
  border: .5em solid brown;
  border-top: 0;
  text-align: center;
}

.box-border__top { /* Align the image & borders */
  display: flex;
}

.box-border__top:before,
.box-border__top:after {
  content: '';
  display: block;
  width: 100%;
  border-top: .5em solid brown; /* Sections of the top image */
}

.box-border__img { /* Center Image */
  transform: translateY(-50%);
  margin: 0 0 -99%;
}

/* Add some padding on the bottom */
.box-border__content {  padding: 5em;  }

<div class="box-border">
  <div class="box-border__top">
    <img class="box-border__img" src="https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png" width="100" height="90" />
  </div>
  <div class="box-border__content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Robogarden_img.png/800px-Robogarden_img.png" width="300" />
  </div>

</div>