CSS两边形 |css点击文字时 变色

首先，大家需要使用HTML代码创建一个容器元素，这可以通过div标签实现。大家可以将两个形状放在div元素的左侧和右侧，然后使用一些CSS样式来控制容器的外观和形状。

<div class="two-sides-shape">
<div class="left-shape"></div>
<div class="right-shape"></div>
 </div>

接下来，大家需要使用CSS样式为这两个形状添加形状和颜色，大家可以在CSS中使用伪元素before和after来实现这一点。这里是一个使用CSS创建两侧斜形的示例代码：

.two-sides-shape {
 position: relative;
 width: 300px;
 height: 150px;
 background-color: #F6C4D2;
}
.two-sides-shape .left-shape,
.two-sides-shape .right-shape {
 position: absolute;
 content: "";
 top: 0;
 bottom: 0;
 width: 50%;
}
.two-sides-shape .left-shape {
 left: 0;
 background-color: #D9EAF5;
 transform: skew(-20deg);
 transform-origin: top left;
 z-index: 1;
}
.two-sides-shape .right-shape {
 right: 0;
 background-color: #5DA5D5;
 transform: skew(20deg);
 transform-origin: top right;
 z-index: 2;
}

上面的代码使用了transform属性，这是CSS3的一个新属性，它可以将元素转换为斜形、缩放或旋转。在这个例子中，大家使用transform属性将左侧形状倾斜，并将右侧形状倾斜。

除了上面的示例之外，大家还可以使用其他CSS样式来创建不同类型的两边形，例如，大家可以使用clip-path属性创建剪切形，或者使用border-radius属性创建圆形、椭圆形或其他形状。不管使用什么方法，大家都需要仔细调整样式，确保形状看起来完美。