如何在css中创建两行的屋顶？

Question

如何在css中创建像这个图像中的屋顶？ 请帮忙。

Answer 1

只需制作一个方框，用边框为边角着色，然后旋转/重新定位。

＆＃13;

＆＃13;

.roof {
  height: 10em;
  width: 10em;
  border-left: 5px solid black;
  border-top: 5px solid black;
  transform: rotate(45deg) translate(2.5em);
  position: absolute;
}

＆＃13;

<div class="roof"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将 absolute-positioning 与CSS transform property 结合使用。

请注意，您希望rotate向右倾斜45度，向左旋转45度（使用负旋转）。

＆＃13;

＆＃13;

#line1 {
    width: 200px; /* Length */
    height: 5px; /* Thickness */
    position: absolute;
    top: 100px;
    left: 190px; /* #line2 width - both heights */
    background-color: black;
    
    /* Rotation */
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 3-8 */
    transform: rotate(45deg);
}

#line2 {
    width: 200px; /* Length */
    height: 5px; /* Thickness */
    position: absolute;
    top: 100px;
    left: 50px;
    background-color: black;
    
    /* Rotation */
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari 3-8 */
    transform: rotate(-45deg);
}

＆＃13;

<div id="line1"></div>
<div id="line2"></div>

＆＃13;

＆＃13;

＆＃13;