<分区>
html - 带边框的定位标志
标签 html css positioning
我正在尝试使用 html 和 css 将设计转化为代码，但我在英雄部分遇到了困难。放置此 Logo 及其周围停止的边框的最佳方式是什么。
附件是我正在尝试重新创建的设计图片
最佳答案
你可以在课前和课后使用
::before 和 ::after 然后添加border and position 它在左右 Angular 的顶部。
*{
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>检查其是否正常工作
关于html - 带边框的定位标志，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55643028/