csscss-shapessketch-3

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

Sketch screenshot

html/css approximation

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>

Solution

  • 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>