2

I am looking to generate a rectangle shape of 12 houses chart using CSS. The best I could use is CSS-doodle code below; even that it is nowhere perfect. How can the example images below can be accomplished? The structure has to be a single structure, and I want to add text to all houses.

<css-doodle >
 :doodle {

  overflow: hidden;
  height:14em; width:16em;
  @grid: 4;
}
:container {
  grid-gap: 1px;
  transform: rotate(45deg) scale(1.5);
}
  background: #d0262e;
</css-doodle>

enter image description here enter image description here

Majoris
  • 2,963
  • 6
  • 47
  • 81

3 Answers3

2

Here is an idea with one element and some background tricks. It's also responsive, you can resize the element and the structure will be kept the same. I also considered order to correctly place the elements

.box {
  width:280px;
  height:180px;
  border:3px solid;
  display:flex;
  flex-wrap:wrap;
  background:
    linear-gradient(to top right,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px)),
    linear-gradient(to top left ,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px));
  background-size:50% 50%;
   
  counter-reset:num;
  overflow:hidden;
  resize:both;
}
.box span {
  flex-grow:1;
  flex-basis:50%;
  height:25%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.box span:nth-child(3),
.box span:nth-child(5),
.box span:nth-child(9),
.box span:nth-child(11) {
  flex-basis:25%;
}
.box span:nth-child(2),
.box span:nth-child(6),
.box span:nth-child(8),
.box span:nth-child(12) {
  height:12.5%;
}
span:before {
  content:counter(num);
  counter-increment:num;
}
<div class="box">
  <span style="order:4"></span>
  <span style="order:1"></span>
  <span style="order:3"></span>
  <span style="order:6"></span>
  <span style="order:8"></span>
  <span style="order:11"></span>
  <span style="order:9"></span>
  <span style="order:12"></span>
  <span style="order:10"></span>
  <span style="order:7"></span>
  <span style="order:5"></span>
  <span style="order:2"></span>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • amazing! One question the counting in your chart is horizontal. How do I change the counting to match the way it is in my example chart? Counting kinda goes in anti-clockwise. – Majoris Dec 22 '19 at 11:23
  • 1
    @KapishM CSS counters cannot do this. Either you write the numbers manually or you consider the `order` property to change the order of the elements to have the result you want. In all the cases, there is some manual work but I don't think it's an issue since it's only about 12 elements. – Temani Afif Dec 22 '19 at 11:25
  • Okay. Understood what you saying not possible for straight counting. But If I just skip that counting. And I want to address them in a series anti-clockwise to place values of an array in them. Can I index them anti-clockwise 1 to 12 as in example? Using id or by some other means? – Majoris Dec 22 '19 at 11:32
  • @You are a genius! I am still trying to read your code and understand the magic you did. :) – Majoris Dec 22 '19 at 12:24
  • 1
    @KapishM I also updated the gradient for an optimized version where you only need two gradient – Temani Afif Dec 22 '19 at 12:25
  • Thanks a lot for your effort!! Can I contact you for working on my project? – Majoris Dec 23 '19 at 06:56
  • @KapishM yes sure, you can find a chat widget on my personal website shown in my profile – Temani Afif Dec 23 '19 at 09:13
1

You may also play with mask and position :

* {
  box-sizing: border-box;
}

article {
  min-width: 30vmax;
  min-height: 20vmax;
  height: 80vh;
  width: 80vw;
  border: solid;
  counter-reset: divs;
  overflow: hidden;
  background: black;
}

div {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  /* make your diamond shape*/
  background: lightblue;
  counter-increment: divs;
  height: 50%;
  position: relative;
  transform: scale(0.99);  /* will show parent's bacground alike borders*/
}

div:nth-child(odd) {
  background: lightgreen;
}

div:before {
  content: counter(divs);
  margin: auto;
}

div:nth-child(2) {
  order: -1;
  top: -25%;
  left: 0;
  padding-top: 10%;
}

div:nth-child(1) {
  left: -25%;
}

div:nth-child(3) {
  left: -25%;
  top: -50%;
  padding-left: 15%;
}

div:nth-child(4) {
  left: -50%;
  top: -25%
}

div:nth-child(5) {
  left: -25%;
  top: -50%;
  padding-left: 15%
}

div:nth-child(6) {
  left: -50%;
  top: -25%;
  padding-bottom: 10%;
}

div:nth-child(7) {
  left: 25%;
  top: -100%;
}

div:nth-child(8) {
  left: 0%;
  top: -75%;
  padding-bottom: 10%;
}

div:nth-child(9) {
  left: 75%;
  top: -150%;
  padding-right: 15%;
}

div:nth-child(10) {
  left: 0%;
  top: -175%;
}

div:nth-child(11) {
  left: 75%;
  top: -250%;
  padding-right: 15%;
}

div:nth-child(12) {
  left: 0;
  top: -275%;
  padding-top: 10%;
}

/* swap position */


article:hover {
  background: tomato;
}
article:hover div:nth-child(2) {
  left: 50%;
}
article:hover div:nth-child(12) {
  left: -50%;
}
article:hover div:nth-child(3) {
  left: 75%;
  padding: 0 10% 0 0;
}
article:hover div:nth-child(11) {
  left: -25%;
  padding: 0 0 0 10%;
}

article:hover div:nth-child(4) {
  left: 0%;
}
article:hover div:nth-child(10) {
  left: -50%;
}

article:hover div:nth-child(5) {
  left: 75%;
  padding: 0 10% 0 0;
}
article:hover div:nth-child(9) {
  left: -25%;
  padding: 0 0 0 10%;
}

article:hover div:nth-child(6) {
  left: 0%;
}
article:hover div:nth-child(8) {
  left: -50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <article class="row flex-wrap m-auto">
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
    <div class="col-6 d-flex"> </div>
  </article>

https://codepen.io/gc-nomade/pen/MWYmbEz

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Lovely! I have the same question - How can I index this anti-clockwise 1 to 12? I want to place array values in it? And Can this be responsive? – Majoris Dec 22 '19 at 11:47
  • 1
    @KapishM it can rezise but will not reorder things while screen is rezized (play the snippet in full page to see what happens) . to reorder-things, you will need to reset the top and left position individually. position can be reset by step of 25% . i used your screenshot .to place these – G-Cyrillus Dec 22 '19 at 11:56
  • 1
    @KapishM example how to set element somewhere else : https://codepen.io/gc-nomade/pen/MWYmbEz hover the box to see them going to the opposite left coordonates only is updated. – G-Cyrillus Dec 22 '19 at 12:03
  • Really appreciate your effort on this. I can use this solution for generating output to pdf files. – Majoris Dec 23 '19 at 06:58
0

You can use this code for achieving the diagonal lines

.childDiv {
    border:1px solid gray;
    width:100px;
    height:100px;
    position:relative;
}

.childDiv:after {
    position:absolute;
    content:"";
    border-top:1px solid black;
    width:141px;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}

This will give you the diagonal line from top left to the bottom right corner. You can rotate it by a further 90° to get the diagonal from top right to bottom left.

width:141px is due to Pythagoras theorem. I took the sides as 100px, and hence, the hypotenuse(the diagonal in our case) must be 100√2 which is approximately 141.

You should divide your astrology chart into 4 divs as shown: enter image description here

You can employ the above code to these 4 divs (marked with blue) and get the diagonal lines as necessary. Moreover, you will need to remove certain borders from some divs. See this: enter image description here

To get the divs to form a square, you will need a total of 6 divs. 4 of these will be the divs marked in the image above, and 2 will be parent divs, which will hold 2 divs each.

Each parent div will hold 2 divs within in on each row. Think of the code as:

<div id='parentDiv1'>
  <div class='div1 childDiv'></div>
  <div class='div2 childDiv'></div>
</div>

<div id='parentDiv2'>
  <div class='div1 childDiv'></div>
  <div class='div2 childDiv'></div>
</div>

In your CSS file, you should add the following code:

#parentDiv1, #parentDiv2 {
  width: 100px;
  height: 100px;
  float: left;
}
.div1 {
  float: left;
}
.div2 {
  float: left;
}
Aditya Prakash
  • 1,549
  • 2
  • 15
  • 31