css borders with transparent background (when going from Sketch to HTML/CSS)

Question

The first image is the sketch screenshot, it's a square with no background and a 1 px border with a solid 1px shadow. The second picture is my attempt to make this in html/css however it blocks my border, even if the background is transparent.

How can I make it look more like the first image?

code:

.box {
  width:100px;
  height:100px;
  border: 4px solid #191919;
  box-shadow: 4px 4px 0 0 rgba(137, 137, 137, 0.48);
}

<div class="box">
</div>

Post your code. https://stackoverflow.com/help/how-to-ask – Mitya Feb 05 '18 at 12:38 — Mitya, Feb 05 '18 at 12:38
@Utkanos I've added my code – Stef Kors Feb 05 '18 at 12:55 — Stef Kors, Feb 05 '18 at 12:55

Temani Afif · Accepted Answer · 2018-02-05T13:15:32.130

Use pseudo element to create the second square:

.box {
  border: 4px solid #191919;
  width:100px;
  height:100px;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:5px;
  left:5px;
  width:100px;
  height:100px;
  border: 4px solid rgba(137, 137, 137, 0.48);
  z-index:-1;
}

<div class="box">
</div>

Or use drop-shadow filter like this:

.box {
  width: 100px;
  height: 100px;
  border: 4px solid #191919;
  filter: drop-shadow(10px 10px 0px rgba(137, 137, 137, 0.48));
}

<div class="box">
</div>

Another idea with linear-gradient:

.box {
  width: 100px;
  height: 100px;
  background:linear-gradient(to right,#191919 4px,transparent 4px, transparent 86px,#191919 86px,#191919 90px,transparent 0) 0 0/100px 90px no-repeat,
  linear-gradient(to bottom,#191919 4px,transparent 4px, transparent 86px,#191919 86px,#191919 90px,transparent 0) 0 0/90px 100px no-repeat,
  linear-gradient(to right,rgba(137, 137, 137, 0.48) 4px,transparent 4px, transparent 86px,rgba(137, 137, 137, 0.48) 86px,rgba(137, 137, 137, 0.48) 90px,transparent 0) 10px 10px/100px 90px no-repeat,
  linear-gradient(to bottom,rgba(137, 137, 137, 0.48) 4px,transparent 4px, transparent 86px,rgba(137, 137, 137, 0.48) 86px,rgba(137, 137, 137, 0.48) 90px,transparent 0) 10px 10px/90px 100px no-repeat;
}

<div class="box">
</div>

css borders with transparent background (when going from Sketch to HTML/CSS)

1 Answers1