可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:

My initial idea is to create the shape based on three shapes and then colorize the borders accordingly:

But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone?

回答1:

This approach allows you to:

add any content and the borders will adapt around it regardless of height or width of the content
support transparent background and can be displayed over an image or non plain colors
doesn't add any unsemantic elements

It relies on 2 absolutely positioned pseudo elements and one div. The spacing between the content and the borders is controlled by the padding on the 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>

回答2:

You can do with css pseudo ::after and ::before , something like this

.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;
}

Demo

Fixed width and height : https://jsfiddle.net/nikhilvkd/qt5ne3yw/

Auto width and height: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/

回答3:

You can do this with :before and :after pseudo elements

Complete design 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;
}

<div class="square"></div>

or 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>

回答4:

Well, go with the above answers, I recommend using pseudo elements to achieve this effect.

But There is another way to accomplish this without using pseudo-elements.

Here is how you should do this.

.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>