带边框定位徽标[复制]

Question

这个问题在这里已有答案：

• Text in Border CSS HTML 5个答案

我试图用html和css将设计变成代码，但我在英雄部分的一个部分难倒。将徽标定位在其周围的边框的最佳方法是什么？

附件是我试图重新创建的设计图像

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>