1. 正三角形：使用 CSS 类名 “css-triangle-forward-triangle” 和属性 “overflow-x: hidden”，可以创建一个正三角形。
“`css
.css-triangle-forward-triangle {
position: relative;
overflow-x: hidden;
.css-triangle-forward-triangle:before,
.css-triangle-forward-triangle:after {
content: “”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
.css-triangle-forward-triangle:before {
width: 0;
height: 100%;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 125px solid black;
.css-triangle-forward-triangle:after {
width: 0;
height: 100%;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 62.5px solid black;
2. 倒三角形：使用 CSS 类名 “css-triangle-reverse-triangle” 和属性 “overflow-x: hidden”，可以创建一个倒三角形。
“`css
.css-triangle-reverse-triangle {
position: relative;
overflow-x: hidden;
.css-triangle-reverse-triangle:before,
.css-triangle-reverse-triangle:after {
content: “”;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
.css-triangle-reverse-triangle:before {
width: 0;
height: 100%;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
border-right: 125px solid black;
.css-triangle-reverse-triangle:after {
width: 0;
height: 100%;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 62.5px solid black;
除了这两种基本类型之外，还可以使用 CSS 类名 “css-triangle-star” 和属性 “overflow-y: hidden”，创建一个六角星(star)形状。
“`css
.css-triangle-star {
position: relative;
overflow-y: hidden;
.css-triangle-star:before,
.css-triangle-star:after {
content: “”;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 100%;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 125px solid black;
.css-triangle-star:after {
width: 0;
height: 100%;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 62.5px solid black;
通过使用这些样式，可以很容易地创建出各种形状的三角形，从而在网页中实现更加灵活的布局效果。