'transform: translate () rotate ();' Creating a proper X inside a box

HTML-CSS
1

I don’t know how to properly use the ‘transform: translate() rotate();’ property. I just adjusted the values of ‘translate()’ manually - trial and error - while making this.

Is there a better or proper way to make this object? Is there a specific formula for the translate values?

This is how I created this object.

.box-out {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background-color: #e3da00;
  border: 2px dashed #a43741;
}

.box-in {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 300px;
  height: 300px;
  background-color: #21BD00;
  border: 2px dashed #522B72;
}

.diagonal-1 {
  width: 424px;
  transform: translate(-62px, 149px) rotate(45deg); /* Q1-1 */
  border-top: 2px dashed #e3da00;
  z-index: initial;
}

.diagonal-2 {
  width: 424px;
  transform: translate(-62px, 149px) rotate(-45deg); /* Q1-1 */
  border-top: 2px dashed #e3da00;
  z-index: initial;
}

.circle{
    position: relative;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #6E6E6E;
    margin: 95px auto;
    z-index: 1;
}

<body>
	<div class="box-out">
		<div class="box-in">
			<div class="diagonal-1"></div>
			<div class="diagonal-2"></div>
			<div class="circle"><div>
		</div>
	</div>
</body>

Thanks in advance.

2

hello,
i did what you asked for using sass mixins and functions to center everything .
you can just copy and start using them (it only works for squares though ) .

you can change the length / border of the inner square as much as you like and the diagonal lines will always be centered .

here’s the link to the jsfiddle .
i hope it gets you to start learning sass, that will simplify so much css work for you.
and if you want to add prefixes for browser support you can use this link
well that’s it for me :smiley: happy coding .

1 Like
3

Hi @soufyakoub. Thank you for your time looking into this problem. I’ve bookmarked your reply and sites that you referenced. However, I’m still currently working on the CSS Grid Curriculum, so I think this technique is quite far from my current skills - I’m a total beginner. Once I get enough skills, I will definitely try this out. Thanks again.

1 Like