如何用CSS实现双线条屋顶？求助实现参考图中的屋顶样式

嘿，我来帮你搞定这个CSS屋顶的问题！不管是你问的「两条线条构成的屋顶」，还是示例图里的屋顶样式，纯CSS就能轻松实现，下面给你两种实用的实现方案：

方案一：伪元素实现双线条轮廓屋顶 #

这个方案不需要额外的DOM元素，用容器的两个伪元素来模拟屋顶的两条线条，灵活度很高。

HTML结构 #

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

CSS代码 #

.house {
  width: 150px;
  margin: 50px auto;
}

/* 屋顶容器，用来定位两条线条 */
.roof {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto;
}

/* 第一条屋顶线条 */
.roof::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -75px;
  width: 2px;
  height: 85px;
  background-color: #333;
  transform: rotate(45deg);
}

/* 第二条屋顶线条 */
.roof::after {
  content: "";
  position: absolute;
  top: -60px;
  left: -5px;
  width: 2px;
  height: 85px;
  background-color: #333;
  transform: rotate(-45deg);
}

/* 房屋主体（可选，用来让效果更完整） */
.body {
  width: 100%;
  height: 100px;
  background-color: #f0e68c;
  border: 2px solid #333;
}

效果说明 #

• 通过transform: rotate()来让线条倾斜成屋顶的角度，你可以调整旋转角度、线条宽度、长度来匹配你的需求。
• 调整top、left的值可以定位线条的位置，让屋顶刚好落在房屋主体上方。

方案二：border实现带线条感的实心屋顶（适配多数示例图样式） #

如果你的目标是看起来像实心但带有线条边框的屋顶，这个方案更合适，利用CSS border的特性来做三角形，再叠加边框：

HTML结构 #

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

CSS代码 #

.house {
  width: 150px;
  margin: 50px auto;
}

.roof {
  width: 0;
  height: 0;
  border-left: 77px solid transparent;
  border-right: 77px solid transparent;
  border-bottom: 60px solid #f0e68c;
  position: relative;
}

/* 屋顶的线条边框 */
.roof::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -75px;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 58px solid #333;
}

.body {
  width: 100%;
  height: 100px;
  background-color: #f0e68c;
  border: 2px solid #333;
}

效果说明 #

• 外层的border做出实心的屋顶形状，内层的伪元素做稍小一点的深色边框，模拟出屋顶的线条感。
• 调整border的宽度和颜色可以快速修改屋顶的大小和样式。

如果你的示例图有特殊细节（比如线条间距、颜色渐变等），可以补充需求，我再帮你调整代码！

内容的提问来源于stack exchange，提问作者Pero