css生肖文字 |css按钮禁用

为了创建生肖文字，大家需要用伪元素::before和::after来生成形状，并利用transform: rotate()旋转和变换细节，以及border-radius来实现圆形效果。

.shengxiao {
position: relative;
text-align: center;
font-size: 30px;
text-transform: uppercase;
}
.shengxiao::before,
.shengxiao::after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top:0;
}
.shengxiao::before {
left: 0;
background: #F44336;
border-radius: 50% 0 0 50%;
transform: rotate(-45deg);
}
.shengxiao::after {
right: 0;
background: #FFF9C4;
border-radius: 0 50% 50% 0;
transform: rotate(45deg);
}

在以上代码中，大家创建了一个包含生肖文字的容器，设置其为相对定位，并设置文字居中和字母大写。接着，大家通过伪元素::before和::after生成两个角度为45度的矩形，并通过transform: rotate()将其旋转45度，以便它们的拐角对齐。同时，一个伪元素设置为红色，另一个伪元素设置为黄色，以匹配生肖的颜色。最后，利用border-radius来实现圆形效果。

当大家在HTML页面中使用这种CSS生肖文字时，大家只需要将文字包含在这个容器中，就可以形成一个动态的生肖图形，让网站更加有趣。