文章展示了用于显示密苑太子酒店1到9号楼的一个CSS布局设计，使用了flexbox来实现内容居中对齐。设计中包含特定的div类，如.driv和.stationDiv，设置了不同颜色的边框和背景，以及三角形边框效果。
<div class="driv drivfl stationDiv">密苑太子酒店1到9号楼</div>
.driv {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
border: 2.67188px solid #fff;
font-size: 12px;
border-radius: 5.36613px;
min-width: 106.249px;
height: 44.5312px;
}
.stationDiv {
background-color: #04ae42;
}
.stationDiv.drivfl:after {
border-right: 9.65625px solid #04ae42;
}
.drivfl:before {
border-top: 10.7188px solid transparent;
border-bottom: 10.7188px solid transparent;
border-right: 10.7188px solid #fff;
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 0.2rem solid transparent;
border-bottom: 0.2rem solid transparent;
border-right: 0.2rem solid #fff;
left: -9%;
top: 25%;
}
.drivfl:after {
border-top: 9.65625px solid transparent;
border-bottom: 9.65625px solid transparent;
border-right: 9.65625px solid #0584d9;
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 0.18rem solid transparent;
border-bottom: 0.18rem solid transparent;
border-right: 0.18rem solid #0584d9;
left: -6%;
top: 28%;
}
扫一扫
6381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
