CODEWITHSUNDEEP
htmlcss
rustyshackleford
rustyshackleford

Reputation: 731

Achieving a CSS border with gaps between certain spots

I want to be able to use something like the code snippet I've included. The problem with mine is that I can't actually cover up the gaps between the border without using transparency... that's an issue because I want this box to go over an image. Surely there's some better approach. Does anybody have any ideas?

Ideally, there's some way to actually omit those parts in the border without using transparency, so that they don't exist at all. I've been digging for a few hours and can't seem to find a solution. Does anybody have any ideas?

div {
	background: transparent;
  color: transparent;
	padding: 2rem;
	position: relative;
	width: 200px;
	height: 200px;
	margin: 3em auto;
	border: dashed 2px #BEBEBE;
}

div::before,
div::after {
	position: absolute;
	background: white;
	content: '';
	z-index: 1;
}

div::before {
	width: 70px;
	left: calc(50% - 35px);
	height: calc(100%);
	top: -2px;
}

div::after {
	height: 35px;
	left: -2px;
	width: calc(100%);
	top: calc(50% - 15px);
}

div>* {
	position: relative;
	z-index: 2;
}
<div>

</div>

Upvotes: 0

Views: 89

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

Perhaps an SVG

svg {
  display: block;
  width: 200px;
  margin: 1em auto;
}

path {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-dasharray: 5 5;
}
<svg viewbox="0 0 100 100">
  <path d="M5,5
           L40,5 
           M60,5 
           L95,5
           L95,95
           L5,95
           L5,60
           M5,40
           L5,5
           "
        
        />
  
</svg>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272648

Use multiple background to achive this like below:

div.box {
  padding: 2rem;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 3em auto;
  
  background:
  /* Top (two lines)*/
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top left/40% 2px,
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top right/40% 2px,
  /* Left (two lines)*/
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) top left/2px 40%,
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) bottom left/2px 40%,
    /* Bottom */
    repeating-linear-gradient(90deg,#BEBEBE 0 4px,transparent 4px 8px) bottom/100% 2px,
    /*Right*/
    repeating-linear-gradient(0deg,#BEBEBE 0 4px,transparent 4px 8px) right/2px 100%;
  background-repeat:no-repeat;
}
<div class="box">

</div>

That you can optimize with CSS variables:

div.box {
  --c:#BEBEBE; /* Color */
  --t:2px;     /* Thickness*/
  --d:4px;     /* length of dashes */
  --h:50px;    /* size of the hole*/

  padding: 2rem;
  position: relative;
  width: 150px;
  height: 150px;
  display:inline-block;
  margin: 1em;
  --g:var(--c) 0 var(--d),transparent var(--d) calc(2*var(--d));
  background:
    /* Top (two lines)*/
    repeating-linear-gradient(90deg ,var(--g)) top left /calc(50% - var(--h)/2) var(--t),
    repeating-linear-gradient(-90deg,var(--g)) top right/calc(50% - var(--h)/2) var(--t),
    /* Left (two lines)*/
    repeating-linear-gradient(180deg,var(--g)) top    left/var(--t) calc(50% - var(--h)/2),
    repeating-linear-gradient(0deg  ,var(--g)) bottom left/var(--t) calc(50% - var(--h)/2),
    /* Bottom */
    repeating-linear-gradient(90deg,var(--g)) bottom/100% var(--t),
    /*Right*/
    repeating-linear-gradient(0deg ,var(--g)) right /var(--t) 100%;
  background-repeat:no-repeat;
}
<div class="box">

</div>

<div class="box" style="--c:red;--t:4px;--h:90px;--d:8px;">

</div>

Upvotes: 1

Related Questions