-2

First, I know there are similar questions available (like. Create concave corners in css) but they don't really cover this situation.

This is not about single cell/div element.

I have three blocks that will have some text content inside:

  1. top-middle centered block (narrow)
  2. middle-middle block (screen-wide)
  3. bottom-middle centered block (narrow)

Basically something like a cross (text removed):

enter image description here

The outer corners (8) is straighforward but how could I achieve those inner ones (4)?

Community
  • 1
  • 1
msciwoj
  • 772
  • 7
  • 23

2 Answers2

2

see bellow code, maybe it needs some adjustments but the idea is that you use pseudo-elements to make those inner borders

let me know if this is what you want

.colored {
  background:yellow;
  border:5px solid green;
  width:100px;
  height:100px;
  box-sizing:border-box;
  position:relative;
}
#content {
  width:300px;
position:relative;
background:#000;
}
.top,.bottom { position:relative;margin:0 auto;clear:both}
.top { border-bottom:none}
.bottom { border-top:none}
.left { border-right:none}
.right { border-left:none;}
.colored.center { border:none;}
.left,.center,.right { float:left;}

.top { border-top-left-radius:10px;border-top-right-radius:10px;}
.bottom { border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.right { border-bottom-right-radius:10px;border-top-right-radius:10px;}
.left { border-bottom-left-radius:10px;border-top-left-radius:10px;}

.top:before {
  position:absolute;
  height:100%;
  width:100%;

  left:-100%;
  top:5px;
  content:"";
  border-bottom-right-radius:10px;
  border-right:5px solid green;
  border-bottom:5px solid green;
  z-index:9999;
  box-sizing:border-box;
  
}
.top:after {
  position:absolute;
  height:100%;
  width:100%;

  right:-100%;
  top:5px;
  content:"";
  border-bottom-left-radius:10px;
  border-left:5px solid green;
  border-bottom:5px solid green;
  z-index:9999;
  box-sizing:border-box;
  
}


.bottom:before {
  position:absolute;
  height:100%;
  width:100%;

  left:-100%;
  bottom:5px;
  content:"";
  border-top-right-radius:10px;
  border-right:5px solid green;
  border-top:5px solid green;
  z-index:9999;
  box-sizing:border-box;
  
}
.bottom:after {
  position:absolute;
  height:100%;
  width:100%;

  right:-100%;
  bottom:5px;
  content:"";
  border-top-left-radius:10px;
  border-left:5px solid green;
  border-top:5px solid green;
  z-index:9999;
  box-sizing:border-box;
  
}
<div id="content">


<div class="top colored">

</div>
<div class="left colored">

</div>
<div class="center colored">

</div>

<div class="right colored">

</div>

<div class="bottom colored">

</div>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • looks more or less the way I wanted but in the code I'd like to have only one "screen-width" div instead of three (left, center, right) - is that possible. Also the inner corners doesn't seem to fit perfectly – msciwoj Aug 19 '16 at 09:57
  • i don't think it's possible to have only one div. there are too many borders , you need many elements to make those borders. not only the inner ones but all of them............regarding the fact that the corners don't fit perfectly,,that's why i said in my answer : ` maybe it needs some adjustments` . for them to fit perfectly , the borders of the 4 divs need to be shorter, but there isn't a `border-height` property. the code i gave you, i think, it's the best you can do with CSS – Mihai T Aug 19 '16 at 10:07
0

Variation with just three divs, a bit hacky but functional. Uses pseudo elements, transforms and inner box-shadow.

div {
  background-color: #000;
  min-height: 100px;
}
.center {
  width: 100px;
  margin: 0 auto;
}
.rounded {
  border-radius: 20px;
  border: 5px solid red;
}
.conc {
  position: relative;
}
.conc::before,
.conc::after {
  content: '';
  position: absolute;
  border: 5px solid red;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  background-color: trnaspanret;
  border-color: red transparent transparent;
  z-index: 3;
  box-shadow: white 0px 0px 0px 20px inset
}
.conc.bottom {
  margin-bottom: -5px;
  border-bottom: 0;
  border-radius: 20px 20px 0 0
}
.conc.top {
  margin-top: -5px;
  border-top: 0;
  border-radius: 0 0 20px 20px
}
.conc::before {
  left: -35px;
}
.conc::after {
  right: -35px;
}
.conc.top::before,
.conc.top::after {
  top: 0px;
}
.conc.bottom::before,
.conc.bottom::after {
  bottom: 0px;
}
.conc.bottom::before {
  transform: rotate(135deg)
}
.conc.bottom::after {
  transform: rotate(-135deg)
}
.conc.top::before {
  transform: rotate(45deg)
}
.conc.top::after {
  transform: rotate(-45deg)
}
.centerblinders {
  position: relative;
}
.centerblinders::before,
.centerblinders::after {
  content: '';
  position: absolute;
  width: 130px;
  height: 20px;
  background-color: #000;
  left: 50%;
  transform: translatex(-50%);
  z-index: 2;
}
.centerblinders::before {
  top: -15px;
}
.centerblinders::after {
  bottom: -15px;
}
<div class="rounded center conc bottom"></div>
<div class="rounded centerblinders"></div>
<div class="rounded center conc top"></div>
myf
  • 9,874
  • 2
  • 37
  • 49