CODEWITHSUNDEEP
htmlcssbordercss-shapes
William Cunningham
William Cunningham

Reputation: 583

How can this type of border be achieved with CSS

In the example image you can see the heavy dark lines before and after "Date" and "Name". I am trying to achieve that with CSS. Searched but can't think of what to call it when searching.

enter image description here

.sort-btn-holder{
  display: inline-block;
}
.sort-title{
  display: block;
  text-align: center;
}
<div class="sort-btns pull-right">

  <div class="sort-btn-holder">
   <span class="sort-title">Date</span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
  </button>

  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
  </button>
  </div>

  <div class="sort-btn-holder">
   <span class="sort-title">Name</span>

    <button id="older" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
    </button>

    <button id="newer" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
    </button>
  </div>

</div>

I was thinking I should use :before or :after. Here is a link to the HTML and CSS in a Fiddle: https://jsfiddle.net/dntbqykk/

Upvotes: 2

Views: 156

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it using absolute positioning and the :after pseudo-element to hold the label ("Date" for example).

The snippet demonstrates a proof-of-concept, but there are still some details to work out to get the exact styling that you may want to blend into your website.

.sort-btn-holder {
  border: 1px dotted blue;
  display: inline-block;
  position: relative;
  padding-top: 25px;
}
.btn.btn-primary {
  border: 1px dotted red;
  width: 50px;
  height: 50px;
}
.sort-title {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 25px;
  right: 25px;
  height: 15px;
  border: 4px solid blue;
  border-width: 4px 4px 0 4px;
}
.sort-title:after {
  content: 'Date';
  margin: 0 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  background-color: white;
  text-align: center;
}
<div class="sort-btn-holder">
  <span class="sort-title"></span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://placehold.it/24x24" width="24px" height="24px">
  </button>
</div>

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122047

Here is option with :before and :after pseudo elements and box-shadow

.sort-btn-holder{
  display: inline-block;
}

.sort-title{
  display: block;
  text-align: center;
  position: relative;
}

.sort-title:after {
  content: '';
  position: absolute;
  right: 15%;
  width: 30px;
  top: 60%;
  height: 13px;
  box-shadow: 5px -5px 0px 0px #000000;
}

.sort-title:before {
  content: '';
  position: absolute;
  left: 15%;
  width: 30px;
  top: 60%;
  height: 13px;
  box-shadow: -5px -5px 0px 0px #000000;
}

button {
  height: 40px;
  width: 65px;
  border: none;
  background: #29477F;
}
<div class="sort-btns pull-right">

  <div class="sort-btn-holder">
   <span class="sort-title">Date</span>

  <button id="desc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px">
  </button>

  <button id="asc" class="btn btn-primary" type="button">
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px">
  </button>
  </div>

  <div class="sort-btn-holder">
   <span class="sort-title">Name</span>

    <button id="older" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px">
    </button>

    <button id="newer" class="btn btn-primary" type="button">
      <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px">
    </button>
  </div>

</div>

Upvotes: 0

Armin
Armin

Reputation: 1178

Not a CSS solution, but did you try using fieldset tag? I know it's not perfect solution, but it would give you similar effect, and you can adjust border style. After that, you can align those inside boxes. That's probably the easiest way, even though I believe CSS would be able to accomplish this, but using more code.

Upvotes: 0

Related Questions