ARTICLE AD BOX
Original pen(circular clock): https://codepen.io/vaskopetrov/pen/yVEXjz
I am trying to make it square and cover the 100% width or height keeping the square aspect ratio.
How to move clock dial lines to corners of the square?
Updated pen: https://codepen.io/editor/nitinjs-the-typescripter/pen/019cf450-8650-70ac-a59f-9ccccf3bfb50
var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];
for (var i = 1; i < 60; i++) {
clockEl.innerHTML += "<div class='diallines'></div>";
dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}
function clock() {
var weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
d = new Date(),
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(),
date = d.getDate(),
month = d.getMonth() + 1,
year = d.getFullYear(),
hDeg = h * 30 + m * (360 / 720),
mDeg = m * 6 + s * (360 / 3600),
sDeg = s * 6,
hEl = document.querySelector('.hour-hand'),
mEl = document.querySelector('.minute-hand'),
sEl = document.querySelector('.second-hand'),
dateEl = document.querySelector('.date'),
dayEl = document.querySelector('.day');
var day = weekday[d.getDay()];
if (month < 9) {
month = "0" + month;
}
hEl.style.transform = "rotate(" + hDeg + "deg)";
mEl.style.transform = "rotate(" + mDeg + "deg)";
sEl.style.transform = "rotate(" + sDeg + "deg)";
dateEl.innerHTML = date + "/" + month + "/" + year;
dayEl.innerHTML = day;
}
setInterval("clock()", 100);
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.clock {
background: #ececec;
height: 100%;
aspect-ratio: 1 / 1;
margin: 0 auto;
border: 14px solid #333;
box-sizing: border-box;
position: relative;
box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);
container-type: size;
}
.dot {
width: 4.67cqi;
height: 4.67cqi;
background: #ccc;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
z-index: 10;
box-shadow: 0 0.67cqi 1.33cqi -0.33cqi black;
}
.hour-hand {
position: absolute;
z-index: 5;
width: 1.33cqi;
height: 21.67cqi;
background: #333;
top: 26.33cqi;
transform-origin: 50% 24cqi;
left: 50%;
margin-left: -0.67cqi;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.minute-hand {
position: absolute;
z-index: 6;
width: 1.33cqi;
height: 33.33cqi;
background: #666;
top: 15.33cqi;
left: 50%;
margin-left: -0.67cqi;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 35cqi;
}
.second-hand {
position: absolute;
z-index: 7;
width: 0.67cqi;
height: 40cqi;
background: gold;
top: 8.67cqi;
left: 50%;
margin-left: -0.33cqi;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform-origin: 50% 41.67cqi;
}
span {
display: inline-block;
position: absolute;
color: #333;
font-size: 7.33cqi;
font-family: 'Poiret One';
font-weight: 700;
z-index: 4;
}
.h12 {
top: 10cqi;
left: 50%;
margin-left: -3cqi;
}
.h3 {
top: 46.67cqi;
right: 10cqi;
}
.h6 {
bottom: 10cqi;
left: 50%;
margin-left: -1.67cqi;
}
.h9 {
left: 10.67cqi;
top: 46.67cqi;
}
.diallines {
position: absolute;
z-index: 2;
width: 0.67cqi;
height: 5cqi;
background: #666;
left: 50%;
margin-left: -0.33cqi;
transform-origin: 50% 50cqi;
}
.diallines:nth-of-type(5n) {
position: absolute;
z-index: 2;
width: 1.33cqi;
height: 8.33cqi;
background: #666;
left: 50%;
margin-left: -0.33cqi;
transform-origin: 50% 50cqi;
}
.info {
position: absolute;
width: 40cqi;
height: 6.67cqi;
border-radius: 2.33cqi;
background: #ccc;
text-align: center;
line-height: 6.67cqi;
color: #000;
font-size: 3.67cqi;
left: 50%;
margin-left: -20cqi;
font-family: "Poiret One";
font-weight: 700;
z-index: 3;
letter-spacing: 1cqi;
}
.date {
top: 26.67cqi;
}
.day {
top: 66.67cqi;
}
<div class="clock">
<div>
<div class="info date"></div>
<div class="info day"></div>
</div>
<div class="dot"></div>
<div>
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<div>
<span class="h3">3</span>
<span class="h6">6</span>
<span class="h9">9</span>
<span class="h12">12</span>
</div>
<div class="diallines"></div>
</div>
7,71510 gold badges65 silver badges106 bronze badges
10
Explore related questions
See similar questions with these tags.
