div 周围不完整的边框答案

【问题标题】：Incomplete borders around divdiv 周围不完整的边框
【发布时间】：2016-01-27 06:46:24
【问题描述】：

我正在寻找一种方法来创建一个带边框的不完整正方形，其中包含一些文本和纯 CSS 的背景。这是我想要实现的目标：

我最初的想法是根据三个形状创建形状，然后相应地为边框着色：

但我有点担心自适应版本 - 缩放三个形状。所以也许是一个更好的主意，有人吗？

【问题讨论】：

请分享您的代码？
你最初的想法是正确的。其实，如果你去我的网站www.joeltbennett.com，你可以看到我用类似的方法来画虚线
不是完全重复，但你会从这个线程中得到这个想法 - stackoverflow.com/questions/31205386/…
查看预期图像。你不需要有不完整的正方形。实际上你需要有 2 张图片。一张图片是有头发的人。再有两个按钮和内容块。您可以使用 z-index 实现此目的
如果您在网站管理员工具中查看 div 或执行此类操作，您可以看到当它缩小到移动尺寸时会发生什么

标签： html css css-shapes

【解决方案1】：

您可以使用 css 伪 ::after 和 ::before ，类似这样

.incomplete-box{
  border: solid 1px #fff;
  border-right: none;
  width: 100px;
  height: auto;
  position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
  content: '';
  position: absolute;
  height: 30%;
  width: 1px;
  background-color: #fff;
  right: 0;
}
.incomplete-box::after{
  top: 0;
}
.incomplete-box::before{
  bottom: 0;
}

演示

固定宽度和高度：https://jsfiddle.net/nikhilvkd/qt5ne3yw/

自动宽高：https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/

【讨论】：

不错的一个。但这是固定的高度和宽度，看看分叉的一个 - jsfiddle.net/ramsunvtech/0v3k8rv8
您可以将高度和宽度设为自动，检查您更新的小提琴jsfiddle.net/nikhilvkd/0v3k8rv8/1

【解决方案2】：

您可以使用:before 和:after 伪元素来做到这一点

完整设计 Fiddle

.square {
  width: 200px;
  height: 300px;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  position: relative;
}

.square:before, .square:after {
  content: "";
  height: 20%;
  position: absolute;
  right: 0;
  border-right: 1px solid gray;
}

.square:before {
  bottom: 0;
}

&lt;div class="square"&gt;&lt;/div&gt;

或SVG

line {
  stroke: #6996FB; 
  stroke-width: 2;
}

svg {
  overflow: visible;
}

button {
  padding: 10px 50px;
  border: none;
  color: white;
  margin-right: 10px;
  margin-top: 15px;
}

.btn-blue {
  background: #5D8CFF;
}

.btn-green {
  background: #33F1D9;
}

h3 {
  margin: 0;
}

<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="1" y1="1" x2="250" y2="1"></line>
    <line x1="0" y1="300" x2="250" y2="300"></line>
    <line x1="1" y1="1" x2="1" y2="300"></line>
    <line x1="249" y1="0" x2="249" y2="70"></line>
    <line x1="249" y1="230" x2="249" y2="300"></line>
    
    <foreignobject x="60" y="90" width="400" height="180">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing  elit. Suscipit</h3>
        <button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button>
      </body>
    </foreignobject>
    
</svg>

【讨论】：

【解决方案3】：

这种方法允许您：

添加任何内容，无论内容的高度或宽度如何，边框都会在其周围调整
支持透明背景，可以显示在图像或非纯色上
不添加任何非语义元素

它依赖于 2 个绝对定位的伪元素和一个 div。内容和边框之间的间距由 div 上的填充控制：

div{
  position:relative;
  display:inline-block;
  padding:50px 100px;
  border-left:1px solid #000;
  text-align:center;
}
div:before, div:after{
  content:'';
  position:absolute;
  right:50%; left:0;
  height:50px;
  border-right:1px solid #000;
}
div:before{
  top:0;
  border-top:1px solid #000;
}
div:after{
  bottom:0;
  border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}

<div>
  <h2>This is a very long title on<br/> 2 lines</h2>
  <button>Button</button>
  <p>Some text</p>
</div>

【讨论】：

虽然我收到了一堆不错的答案，但我会选择这个作为最通用的。
差点忘了 - 你可以在这里看到你的答案：novadentspb.ru

【解决方案4】：

好吧，按照上面的答案，我推荐使用pseudo元素来达到这个效果。

但是还有另一种方法可以在不使用的情况下完成此操作伪元素。

您应该这样做。

.row{display:table;table-layout:fixed;}
    .col{display:table-cell;}
    
    .row{width:250px; margin: auto;}
    .mid.row > .col{ height: 100px; }
    
    .col{ text-align: center;}
    .top.col, .bottom.col{
      border-top: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      height: 50px;
    }
   .bottom.col{
     border-top: 0;
     border-bottom: 1px solid black;
   }
    .mid.row > .col{
      border-left: 1px solid black;
      border-right: 0;
      vertical-align: middle;
      text-align: right;
    }
   .mid.row > .col span{
      margin-right: -30px;
     max-width: 300px;
    }

<div class="row">
  <div class="top col"></div>
</div>
<div class="mid row">
  <div class="col">
    <span>Hey you can achieve this without using pseudo elements :)</span>
  </div>
</div>
<div class="row">
  <div class="bottom col"></div>
</div>

【讨论】：

欣赏你的方式，即使它有点复杂:)
@Krish 谢谢。只是想到了另一种方法来做到这一点:)

【解决方案5】：

我们可以通过linear-gradients 做到这一点。没有 SVG，没有伪元素。我使用了一些变量来轻松控制一切。

.container {
  /* you can change these variables */
  --border-color: #000;
  --border-width: 2px;
  --space: 100px;
  
  width: 200px;
  height: 300px;
  position: relative;

  background: linear-gradient(var(--border-color), var(--border-color)) 0 0/var(--border-width) 100%, 
              linear-gradient(var(--border-color), var(--border-color)) 0 100%/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 0 0/100% var(--border-width), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 0/var(--border-width) calc(50% - (var(--space) / 2)), 
              linear-gradient(var(--border-color), var(--border-color)) 100% 100%/var(--border-width) calc(50% - (var(--space) / 2));
  background-repeat: no-repeat;
}

.content {
  position: absolute;
  width: 200px;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  background: yellow;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  </div>
</div>

【讨论】：