css3 带三角形的矩形 |input css 不能操作

这是一个带三角形的矩形
/*CSS代码*/
.triangle-rect{
width: 200px;
height: 100px;
position: relative;
background-color: #33a4ff;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 20px;
}
.triangle-rect::before{
content: "";
position: absolute;
top: 0;
left: -20px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #33a4ff;
}
.triangle-rect::after{
content: "";
position: absolute;
top: 0;
right: -20px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #33a4ff;
}

代码解析：

首先，大家定义了一个类名为“triangle-rect”的元素，并为其设置了一些基本样式，包括固定宽高、居中文本等。接着，在“triangle-rect”的伪元素中定义了三角形形状。主要思路就是利用CSS3的边框属性来实现这个效果。比如，“border-top”和“border-bottom”都设置了一个透明的边框，而“border-right”和“border-left”则分别被设成20像素的蓝色色块，形成了类似于三角形的形状。然后，通过将它们分别定位到元素的左右两侧，整个三角形就与矩形顶部拼接到一起，最终形成了一个带三角形的矩形。

总之，通过这种创新的思路，大家可以用CSS3轻松地制作出各种独特、惊人的图形效果，丰富网页的外观，展现出新的设计理念。