5

I'm trying to create a cross hair like this:

<div class="crosshair"></div>

enter image description here

using a single element and pure css?

I thought of using ::after & ::before along with the div
but that would only result in 3 bars whereas the image has 4 bars,

I'm not sure if it's even possible but maybe I missed something?

Edit

btw the transparency of the crosshair as a whole changes to see stuff behind it

Edit 2

on @tacoshy request in the comments I'm also adding my "research"

:root{
  --bar_thickness:0.5rem;
  --bar_length:5rem;
}

.crosshair::before{
  content:"";
  display:block;
  background-color:black;
  height:var(--bar_length);
  width:var(--bar_thickness);
  position:relative;
  transform:rotate(90deg);
}

.crosshair {
  margin:3rem;
  background-color:black;
  height:var(--bar_length);
  width:var(--bar_thickness);
}

.crosshair::after{
  content:"";
  display:block;
  background-color:white;
  height:calc( var(--bar_length) * 0.4);
  width:calc( var(--bar_length) * 0.4);
  position:relative;
  bottom:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
<div class="crosshair"></div>

but the problem with my approach is when I need it to be transparent as mentioned in the first edit it fails as such:

:root{
  --bar_thickness:0.5rem;
  --bar_length:5rem;
}

.crosshair::before{
  content:"";
  display:block;
  background-color:black;
  height:var(--bar_length);
  width:var(--bar_thickness);
  position:relative;
  transform:rotate(90deg);
}

.crosshair {
  
  position:absolute;
  opacity:50%;
  margin:3rem;
  background-color:black;
  height:var(--bar_length);
  width:var(--bar_thickness);
}

.crosshair::after{
  content:"";
  display:block;
  background-color:white;
  height:calc( var(--bar_length) * 0.4);
  width:calc( var(--bar_length) * 0.4);
  position:relative;
  bottom:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
<div id="background" style="background-color:red;height:10rem;width:10rem">
  <div class="crosshair"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio

</div>

9
  • 2
    If you didn't need the rounded corners, it's possible. Otherwise, maybe an SVG as a background image.
    – Ouroborus
    Commented May 25, 2022 at 17:32
  • @Ouroborus I don't need the rounded corners, I'm trying to avoid svg background and need it in a single element
    – cak3_lover
    Commented May 25, 2022 at 17:33
  • I have already done that before, so yes it is possible.... Commented May 25, 2022 at 17:34
  • @MisterJojo could you kindly tell me how? :)
    – cak3_lover
    Commented May 25, 2022 at 17:35
  • 1
    with utf8 semi graphic characters Commented May 25, 2022 at 17:42

4 Answers 4

5

You can do something with box-shadow:

#el {
  position: relative;
}

#el::after, #el::before {
  content: "";
  background: black;
  border-radius: 2px;
  position: absolute;
}

#el::after {
  left: 30px;
  width: 10px;
  height: 20px;
  box-shadow: 0 50px black;
}

#el::before {
  top: 30px;
  width: 20px;
  height: 10px;
  box-shadow: 50px 0 black;
}
<div id=el></div>

Or you might use the border instead of box-shadow:

#el {
  position: relative;
  margin-top: 40px;
  height: 10px;
  width: 30px;
  border-left: 20px solid black;
  border-right: 20px solid black;
}

#el::after, #el::before {
  content: "";
  width: 10px;
  height: 20px;
  background: black;
  position: absolute;
  left: 10px;
}

#el::before {
  top: -30px;
}

#el::after {
  top: 20px;
}
<div id=el></div>

Or use only the ::before and ::after borders:

#el {
  position: relative;
}

#el::after, #el::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

#el::before {
  width: 10px;
  height: 70px;
  left: 30px;
  border-top: 20px solid black;
  border-bottom: 20px solid black;
}

#el::after {
  width: 70px;
  height: 10px;
  top: 30px;
  border-left: 20px solid black;
  border-right: 20px solid black;
}
<div id=el></div>

Or use gradients instead of borders:

#el {
  position: relative;
}

#el::after, #el::before {
  content: "";
  position: absolute;
}

#el::before {
  width: 10px;
  height: 70px;
  left: 30px;
  background: linear-gradient(0deg, rgba(0,0,0,1) 28.57%, rgba(0,0,0,0) 28.57%, rgba(0,0,0,0) 71.43%, rgba(0,0,0,1) 71.43%);
}

#el::after {
  width: 70px;
  height: 10px;
  top: 30px;
  background: linear-gradient(90deg, rgba(0,0,0,1) 28.57%, rgba(0,0,0,0) 28.57%, rgba(0,0,0,0) 71.43%, rgba(0,0,0,1) 71.43%);
}
<div id=el></div>

3
  • 1
    beautifully elegant solution! thank you so much
    – cak3_lover
    Commented May 25, 2022 at 18:09
  • building further upon your work, I made this jsfiddle where you can simply change the values of the variables to adjust according to your need. Thought it might be helpful for future travelers :)
    – cak3_lover
    Commented May 25, 2022 at 18:42
  • 1
    @cakelover nice :) One additional comment: You probably don't want to set the border-radius as a percentage, since the behaviour is different than when the value is set in px: developer.mozilla.org/en-US/docs/Web/CSS/border-radius
    – Sandro
    Commented May 30, 2022 at 11:54
4

A solution with 3 property and one gradient:

.cross {
  width:100px;
  aspect-ratio:1;
  --c: linear-gradient(#000 0 0) 50%;
  background:
    var(--c)/34% 10% space no-repeat,
    var(--c)/10% 34% no-repeat space;
}
<div class="cross"></div>

And another one:

.cross {
  --b: 30%; /* length */
  --t: 10%; /* thickness */

  width: 100px;
  aspect-ratio: 1;
  --c: #000 var(--b),#0000 0 calc(100% - var(--b)),#000 0;
  background:
    linear-gradient( 0deg,var(--c)) 50%/var(--t) 100% no-repeat,
    linear-gradient(90deg,var(--c)) 50%/100% var(--t) no-repeat;
}
<div class="cross"></div>

1
  • Wow, genius solution with the background space property :D
    – Sandro
    Commented May 30, 2022 at 11:51
3

I'd prefer a shorter solution using box-shadow and no ::before or ::after pseudo elements. If the div needs to encapsulate the whole crosshair, then this styling could also be applied on the ::before pseudo element.

.crosshair{
  margin:30px;
  width:6px;
  height:6px;
  box-shadow: 15px 0,20px 0,25px 0,-15px 0,-20px 0,-25px 0,0 15px,0 20px,0 25px,0 -15px,0 -20px,0 -25px
}
<div class="crosshair"></div>

2
  • That's a very smart approach, unfortunately there are white line gaps when zooming in and out, which I suspect would be a headache to predict and solve on different browsers and devices, Also it seems difficult to change the bar lengths by having to create multiple shadows
    – cak3_lover
    Commented May 25, 2022 at 20:17
  • 1
    White line gaps are just rounding errors of the browser, but easily fixed by overlapping the shadows one pixel.
    – Willem
    Commented May 28, 2022 at 21:53
0

Using characters for the bars works and is transparent. But you may as well use a font that contains the crosshair then, much like how FontAwesome does icons. FontAwesome probably contains a crosshair.

.crosshair {
    position: relative;
}

.crosshair:before, .crosshair:after {
    content: "— —";
    display: inline-block;
    width: 3em;
    height: 3em;
    line-height: 2.9em;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.crosshair:after {
    transform-origin: center;
    transform: rotate(90deg);
}
<div class="crosshair"></div>

1
  • clever approach but you'll have one hell of a time trying to adjust the thickness and gaps between bars
    – cak3_lover
    Commented May 25, 2022 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.