css实现弯曲一角然后展开

CSS作为前端开发中重要的一部分，常常能让我们实现一些酷炫的效果。当然，有时候也需要实现一些小众但是有趣的需求。比如，在设计网页的时候我们需要将一个角弯曲起来并展开，这时候我们可以使用CSS来实现。

.bend-corner{
     width: 100px;
     height: 100px;
     position: relative;
     overflow: hidden;
     background-color: #0078A8;
}
.bend-corner:before{
     content: "";
     display: block;
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
     border-radius: 0 100% 0 0;
     background-color:#fff;
     transform: skewX(-30deg);
     transform-origin: bottom;
}
.bend-corner:after{
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     height: 100%;
     border-radius: 0 0 100% 0;
     background-color:#fff;
     transform: skewX(30deg);
     transform-origin: bottom;
}

通过上述代码，我们首先定义了父容器.bend-corner的基本样式，包括宽、高、背景颜色等等。然后使用:before和:after伪类分别创建左右两个三角形，通过border-radius、transform、transform-origin等属性来实现弯曲的角度和展开的效果。同时使用overflow:hidden属性来将超出容器范围的部分隐藏掉，从而达到只显示弯曲角的目的。

在实际开发中，我们常需要根据具体的情况来调整样式的细节。例如，我们可以更改父容器的大小、三角形的颜色和透明度等等。这些调整可以让我们更好的将这种效果应用到实际项目中。