如何将水平的家谱转变为垂直的家谱？

时间：2019-04-05 19:37:59

标签： html css html5 css3

这支笔有水平的家谱：
https://codepen.io/Muhsalp/pen/pBbNEX
我怎样才能把这棵家谱变成垂直的？

方框1将在顶部。方框1.1和1.2将位于其下方。

<div id='wrapper'><span class='label'>1</span><div class='branch lv1'><div class='entry'><span class='label'>1.1</span><div class='branch lv2'><div class='entry'><span class='label'>1.1.1</span><div class='branch lv3'><div class='entry'><span class='label'>1.1.1.1</span></div><div class='entry'><span class='label'>1.1.1.2</span></div></div></div><div class='entry'><span class='label'>1.1.2</span><div class='branch lv3'><div class='entry sole'><span class='label'>1.1.2.1</span></div></div></div></div></div><div class='entry'><span class='label'>1.2</span><div class='branch lv2'><div class='entry sole'><span class='label'>1.2.1</span></div></div></div></div></div></div></div>

2 个答案:

答案 0 :(得分：0)

我将使用CSS transform: rotate()属性。我创建了一个名为rotate的自定义CSS类，并将其附加到您的根<div>上，并带有包装器标识符，即<div id:"wrapper">。 

.rotate {
   transform: rotate(90deg); 
}

执行90度旋转，使您的图形垂直对齐，而不是水平对齐。

我还在自定义margin-top类中添加了rotate属性，以将图形向下移动到视图中。尽管由于硬编码的元素大小，您可能不得不为此而烦恼。以下是我的代码沙箱和工作示例：

*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0px;}
#wrapper{position: relative;}
.branch{position: relative; margin-left: 250px;}
.branch:before {
  content: "";
  width: 50px;
  border-top: 2px solid yellow;
  position: absolute;
  left: -100px;
  top: 50%;
  margin-top: 1px;
}

.entry {
  position: relative;
  min-height: 60px;
}
.entry:before {
  content: "";
  height: 100%;
  border-left: 2px solid red;
  position: absolute;
  left: -50px;
}
.entry:after {
  content: "";
  width: 50px;
  border-top: 2px solid blue;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.entry:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.entry:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.entry:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.entry:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid green;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.entry.sole:before {
  display: none;
}
.entry.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.label {
  display: block;
  min-width: 150px;
  padding: 5px 10px;
  line-height: 20px;
  text-align: center;
  border: 2px solid purple;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

.rotate {
   margin-top: 160px;
   transform: rotate(90deg); 
}
<div id='wrapper' class="rotate"><span class='label'>1</span><div class='branch lv1'><div class='entry'><span class='label'>1.1</span><div class='branch lv2'><div class='entry'><span class='label'>1.1.1</span><div class='branch lv3'><div class='entry'><span class='label'>1.1.1.1</span></div><div class='entry'><span class='label'>1.1.1.2</span></div></div></div><div class='entry'><span class='label'>1.1.2</span><div class='branch lv3'><div class='entry sole'><span class='label'>1.1.2.1</span></div></div></div></div></div><div class='entry'><span class='label'>1.2</span><div class='branch lv2'><div class='entry sole'><span class='label'>1.2.1</span></div></div></div></div></div></div></div>

希望有帮助！

答案 1 :(得分：0)

我只为垂直图表编写 CSS 。只需在<head> <title>Blurry Effect</title> </head> <body> <div class="background"> <div class="blur"></div> <h1 class="text">This is the <br>blurry side</h1> </div> </body> </html>元素中添加verticalChart类。

HTML 

wrapper

CSS 

<div id='wrapper' class="verticalChart">

我只是更新下面的代码片段中提到的更改。试试这个，希望对您有所帮助。谢谢

.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -52px;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0px;}
#wrapper{position: relative;}
.branch{position: relative; margin-left: 250px;}
.branch:before {
content: "";
width: 50px;
border-top: 2px solid yellow;
position: absolute;
left: -100px;
top: 50%;
margin-top: 1px;
}

.entry {
position: relative;
min-height: 60px;
}
.entry:before {
content: "";
height: 100%;
border-left: 2px solid red;
position: absolute;
left: -50px;
}
.entry:after {
content: "";
width: 50px;
border-top: 2px solid blue;
position: absolute;
left: -50px;
top: 50%;
margin-top: 1px;
}
.entry:first-child:before {
width: 10px;
height: 50%;
top: 50%;
margin-top: 2px;
border-radius: 10px 0 0 0;
}
.entry:first-child:after {
height: 10px;
border-radius: 10px 0 0 0;
}
.entry:last-child:before {
width: 10px;
height: 50%;
border-radius: 0 0 0 10px;
}
.entry:last-child:after {
height: 10px;
border-top: none;
border-bottom: 2px solid green;
border-radius: 0 0 0 10px;
margin-top: -9px;
}
.entry.sole:before {
display: none;
}
.entry.sole:after {
width: 50px;
height: 0;
margin-top: 1px;
border-radius: 0;
}

.label {
display: block;
min-width: 150px;
padding: 5px 10px;
line-height: 20px;
text-align: center;
border: 2px solid purple;
border-radius: 5px;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -52px;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

Codepen Metioned更改已在下面的代码段中解决。谢谢 

<div id='wrapper' class="verticalChart">
  <span class='label'>1</span>
  <div class='branch lv1'>
      <div class='entry'>
          <span class='label'>1.1</span>
          <div class='branch lv2'>
              <div class='entry'>
                  <span class='label'>1.1.1</span>
                  <div class='branch lv3'>
                      <div class='entry'>
                          <span class='label'>1.1.1.1</span>
                      </div>
                      <div class='entry'>
                          <span class='label'>1.1.1.2</span>
                      </div>
                  </div>
              </div>
              <div class='entry'>
                  <span class='label'>1.1.2</span>
                  <div class='branch lv3'>
                      <div class='entry sole'>
                          <span class='label'>1.1.2.1</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class='entry'>
          <span class='label'>1.2</span>
          <div class='branch lv2'>
              <div class='entry sole'>
                  <span class='label'>1.2.1</span>
              </div>
          </div>
      </div>
  </div>
</div>
*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0px;}
#wrapper{position: relative;}
.branch{position: relative;}
.branch:before {
content: "";
width: 50px;
border-top: 2px solid yellow;
position: absolute;
left: -100px;
top: 50%;
margin-top: 1px;
}

.entry {
position: relative;
min-height: 60px;
}
.entry:before {
content: "";
height: 100%;
border-left: 2px solid red;
position: absolute;
left: -50px;
}
.entry:after {
content: "";
width: 50px;
border-top: 2px solid blue;
position: absolute;
left: -50px;
top: 50%;
margin-top: 1px;
}
.entry:first-child:before {
width: 10px;
height: 50%;
top: 50%;
margin-top: 2px;
border-radius: 10px 0 0 0;
}
.entry:first-child:after {
height: 10px;
border-radius: 10px 0 0 0;
}
.entry:last-child:before {
width: 10px;
height: 50%;
border-radius: 0 0 0 10px;
}
.entry:last-child:after {
height: 10px;
border-top: none;
border-bottom: 2px solid green;
border-radius: 0 0 0 10px;
margin-top: -9px;
}
.entry.sole:before {
display: none;
}
.entry.sole:after {
width: 50px;
height: 0;
margin-top: 1px;
border-radius: 0;
}

.label {
display: block;
min-width: 150px;
padding: 5px 10px;
line-height: 20px;
text-align: center;
border: 2px solid purple;
border-radius: 5px;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
.verticalChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.verticalChart .label {
  position: static !important;
  margin: 0 10px !important;
}

.verticalChart .branch {
  margin: 100px 0 0 !important;
  display: flex;
}

.verticalChart .branch:before {
  border-left: 2px solid yellow;
  border-top: 0 !important;
  height: 50px !important;
  width: auto !important;
  left: 50% !important;
  top: -101px !important;
}

.verticalChart .entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verticalChart .entry:before {
  height: auto;
  width: 100%;
  border-top: 2px solid red;
  border-left: 0 !important;
  top: -50px;
  left: auto;
  margin-top: 0;
}

.verticalChart .entry:first-child:before {
    height: 10px;
    width: 50%;
    left: 50%;
}

.verticalChart .entry:last-child:before {
    height: 10px;
    width: 50%;
    border-radius: 0 10px 0 0;
    left: 0;
    top: -50px;
}

.verticalChart .entry:last-child:after {
    height: 49px;
    border-top: none;
    border-right: 2px solid green;
    border-bottom: 0;
    border-radius: 0 10px 0 0;
    margin-top: 1px;
    width: 10px;
    border-left: 0;
    left: calc(50% - 10px);
}

.verticalChart .entry:first-child:after {
    width: 10px;
}

.verticalChart .entry:after {
    height: 50px;
    border-left: 2px solid blue;
    border-top: 0;
    top: -50px;
    left: 50%;
}

.verticalChart .entry.sole:after {
    height: 51px;
    width: 0;
    margin-top: 0px;
    border-radius: 0;
    left: 50%;
}

相关问题
最新问题