如何在容器之间添加透明间隙的边框

时间：2015-07-03 11:09:23

标签： html css css3 css-shapes linear-gradients

这是我试图用CSS实现的设计图像。

enter image description here

如何为容器div实现此类边框，以便我可以在间隙之间放置透明徽标和文本。此设计将在视频背景上进行。黑色背景仅用于说明目的。

到目前为止，我试图通过测试来实现这样的目标：

body {
  background: black;
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  margin-top: 60px;
  width: 50%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.steps-frame-1 {
  border: 0;
  position: relative;
}
.steps-frame-1::after,
.steps-frame-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 45%;
  border: 2px solid #fff;
}
.steps-frame-1::before {
  bottom: 0;
  border-top: 0;
}
.steps-frame-1::after {
  border-bottom: 0;
  top: 0;
}
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
</div>

jsFiddle

问题是如何在徽标顶部边框上留下空白。整个容器也必须有响应。

任何帮助将不胜感激。

4 个答案:

答案 0 :(得分：10)

您可以使用多个linear-gradient图片作为父div容器的背景，如下面的代码段所示。这是实现它的一种方法，无需添加任何额外元素。

背景不一定是纯色。这种方法可以支持透明度。你需要特别注意的是，由于我们在linear-gradient中使用百分比，因此随着高度/宽度的增加，间隙会增加（反之亦然）。您可以使用“完整页面”选项查看此内容。

文本容器上的transform: translateX(-50%), translateY(-50%)用于空间内容的垂直和水平居中。

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  position: relative;
  height: 30vw;
  width: 75vw;
  margin: 20px;
  background-image: linear-gradient(to right, beige 5%, transparent 5%, transparent 20%, beige 20%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%);
  background-size: 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, top left, top right;
  background-repeat: no-repeat;
  border-bottom: 2px solid beige;
}
.left-text,
.right-text {
  position: absolute;
  top: 50%;
  height: 20px;
  color: beige;
}
.left-text {
  left: 0%;
  transform: translateX(-50%) translateY(-50%);
}
.right-text {
  right: 0%;
  transform: translateX(50%) translateY(-50%);
}
.top-text {
  position: absolute;
  top: 0%;
  left: 12.5%;
  content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_Logo.png);
  width: 15%;
  transform: translateX(-50%) translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
  <div class='top-text'></div>
  <div class='left-text'>Text</div>
  <div class='right-text'>Text</div>
</div>

答案 1 :(得分：2)

这是我的解决方案：

  • 在盒子的每一侧添加一个辅助元素。
  • 将徽标/文本放在帮助元素中。
  • 使用伪元素在徽标/文字
    • 之前和之后添加水平/垂直线条

＆＃13;
＆＃13; 
SELECT p.*, SUM(r.rating)/COUNT(r.rating) AS rating
FROM productmaster p
INNER JOIN ratemaster r ON p.id = r.productid
GROUP BY p.id
ORDER BY p.category, rating DESC
＆＃13; 
$top3 = array();
while ($row = /*..fetch logic*/) {
    if (array_key_exists($row['categoryId'], $top3)) {
        $top3[$row['categoryId']] = array();
    }
    if (count($top3[$row['categoryId']]) >= 3) {
        //top 3 for this category are found because query is ordered
        continue;
    }
    $top3[$row['categoryId']][] = array(
        //id, name, ...
    );
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

<强> Demo

HTML 

<div class="steps-frame-1">
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
        <div class="one">text</div>
        <div class="two">text</div>
        <div class="three">text</div>
        <div class="four">text</div>
    </div>
    <!-- inner -->
</div>

CSS 

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.inner {
    position: relative;
    border: 2px solid #fff;
}
.inner div {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 50px;
    background: #000;
    color: #fff;
}
.one {
    top: 0;
    bottom: 0;
    margin: auto;
    left: -25px;
    width: 50px;
    text-align: center;
}
.two {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -25px;
    width: 50px;
    text-align: center;
}
.three {
    top: -15px;
    margin: auto;
    left: 25px;
    width: 50px;
    text-align: center;
}
.four {
    bottom: -15px;
    margin: auto;
    right: 25px;
    width: 50px;
    text-align: center;
}

答案 3 :(得分：0)

我怀疑是否存在切割边框的原生方式，因此您必须假设它是一个带有更多容器的边界。

这样的事情应该足够了。没什么好看的，所以浏览器支持也不会成为问题：

＆＃13;
＆＃13; 
body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    position: relative;
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.borderColour {
     background-color: #fff;   
}
.borderTopLeft {
     position: absolute;
    top:0;
    left: 0;
    width: 10%;
    height:2px;
}
.borderTopRight {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 2px;
    height: 45%;
}
.borderRightBottom {
    position: absolute;
    bottom:0;
    right: 0;
    width: 2px;
    height:45%;
}
.borderLeftTop {
    position: absolute;
    top:0;
    left: 0;
    width: 2px;
    height: 45%;
}
.borderLeftBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 2px;
    height:45%;
}
.borderBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height:2px;
}
＆＃13; 
<div class="steps-frame-1">
    <div class="borderColour borderTopLeft"></div>
    <div class="borderColour borderTopRight"></div>
    <div class="borderColour borderRightTop"></div>
    <div class="borderColour borderRightBottom"></div>
    <div class="borderColour borderLeftTop"></div>
    <div class="borderColour borderLeftBottom"></div>
    <div class="borderColour borderBottom"></div>
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
    </div>
    <!-- inner -->
</div>
＆＃13;
＆＃13;
＆＃13;

http://jsfiddle.net/ddn53xsf/3/

相关问题
最新问题