Is it possible to make a border around a box that

I made something on photoshop so people can understand what I'm picturing in my head.

look at the border around the number 12 in this calendar

回答1:

Here is an idea using SVG as background with some rotation and scale. You can easily change the text, font, colors, etc. but you need then to adjust different values like padding, background-size, background-position, etc

.box {
  padding: 10px;
  margin:10px;
  font-size: 50px;
  display: inline-block;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-x;
  background-size:45px 10px;
  background-position:top left,bottom left;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  left: 0;
  background-image: 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:rotate(90deg);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>"), 
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 50 12' height='10' width='45' style='transform:rotate(90deg) scale(-1,-1);'><text x='0' y='12' style='font-family: arial;'>TODAY</text></svg>");
  background-repeat:repeat-y;
  background-size:45px 45px;
  background-position:calc(100% + 18px) 0,-18px 0;
}

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

<div class="box">
  16/07/2018
</div>

<div class="box">
  16 Jul 2018
</div>

回答2:

Like this? You can simply use a Photoshop image that is png and has a transparent background but with the design you want, use css to attach a background: url("Image Src") to a custom class and then run a JavaScript code to check the date and then attach it to your calendar design. You need to play with the css to match your calendar date positions and size.

.date {
  font-size:100px;
  padding-left:10px;
}

.active-date {
  background: url("https://image.ibb.co/ipQRid/date_bk.png");
  background-repeat: no-repeat;
  background-size:contain;
}