Incomplete borders around div

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:

Approach to create incomplet borders around div

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

标签： html css css3 css-shapes

4条回答

相关推荐>>

2楼-- · 2019-03-23 11:25

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/

0人赞添加讨论(0) 举报

一纸荒年 Trace。

3楼-- · 2019-03-23 11:33

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>

0人赞添加讨论(0) 举报

迷人小祖宗

4楼-- · 2019-03-23 11:44

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>

0人赞添加讨论(0) 举报

我欲成王，谁敢阻挡

5楼-- · 2019-03-23 11:44

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>

0人赞添加讨论(0) 举报

Incomplete borders around div

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间