css倒三角居中 |html5css参考手册下载

/* html结构 */
<div class="triangle">
<div class="content">
Lorem ipsum dolor sit amet
</div>
</div>
/* CSS样式 */
.triangle {
position: relative;
width: 100px;
height: 80px;
background-color: #ccc;
}
.triangle:before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #ccc transparent;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先，在HTML中大家需要一个父级元素和一个包裹内容的子级元素。在CSS中，大家将父级元素设置为相对定位，并使用:before伪元素来创建一个三角形。在这个伪元素中，大家需要设置bottom为负数，left为50%，以此实现让伪元素中心点在父元素下方且居中的效果，同时使用transform的translateX来调整位置。最后，为伪元素设置border-style、border-width和border-color实现三角形的样式。

接下来，大家需要让包裹内容的子级元素居中。这里大家使用position: absolute来让它脱离文档流，再使用top、left以及transform的translate来进行居中操作。

最后，大家的倒三角便成功居中。你可以根据实际需求调整宽高和其他样式属性，从而满足不同的设计要求。