css方形边框，边框底部有缺口 [英] css square border with gap in border bottom

问题描述

我正在尝试复制此模拟设计.

I'm trying to replicate this mock up design.

设计:

当前:

是否有一种方法可以确保全部购买"忽略溢出:隐藏，但是前后服从溢出:隐藏?

Is there a way to make sure the "Shop All" ignores the overflow:hidden, but the before and after obey the overflow:hidden?

还是我可以尝试实现这一目标的另一种方法?

Or is there another method I can try to implement this?

<div id="outer">
  <div id="opaq">
  <div id="inner">
    <h1>Performance Parts</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet. Nunc gravida urna urna. Vestibulum vitae lectus leo. Etiam fermentum nunc vel nulla tincidunt, sit amet molestie lectus pulvinar.</p>
    <div id="shop">Shop all</div>
  </div>
  </div>  
</div>

Css

#outer{
  max-width:500px;
  text-align:center;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");

}
#opaq{
  background-color: rgba(48, 44, 44, 0.7);
  padding:5px;
}
#inner{
  border:1px solid red;
  margin:10px;
  color:white;
  border-bottom:none;
  overflow:hidden;
}

#shop{
  position:relative;
  top:8px;
  display: inline-block;
}
#shop:after{
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  top: 9px;
  width: 600px;
  left: 100%;
  margin-left: 15px;
}
#shop:before{
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  top: 9px;
  width: 600px;
  right: 100%;
  margin-right: 15px;
}

推荐答案

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.wrapper {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(http://beerhold.it/400/300);
  background-repeat: no-repeat;
  background-size: cover;
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
fieldset {
  width: 90%;
  height: 90%;
  margin-top: .7em;
  transform: rotate3d(0, 0, 1, 180deg);
  border: 3px solid rgba(255, 255, 255, .4);
}
legend {
  font-size: 1.4em;
  font-weight: 700;
}
legend span,
fieldset .text {
  display: block;
  transform: rotate3d(0, 0, 1, 180deg);
  color: white;
  text-shadow: 0 0 4px black;
  padding: 0 1em;
}
legend span {
  color: yellow;
}
fieldset .text {
  height: 100%;
}
fieldset .text h1 {
  padding: .3em 0;
  text-align: center;
}
fieldset .text p {
  line-height: 1;
}

<div class="wrapper">
  <fieldset>
    <legend align="center"><span>SHOP ALL</span>
    </legend>
    <div class="text">
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a justo nisl. Phasellus consequat tincidunt elit, sed interdum nibh blandit ut. Nunc augue erat, rutrum ac vehicula nec, pulvinar in eros.
      </p>
    </div>
  </fieldset>
</div>

这篇关于css方形边框，边框底部有缺口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！