css3渐变倒三角

最新推荐文章于 2024-09-13 21:30:49 发布

VR攻城狮

最新推荐文章于 2024-09-13 21:30:49 发布

阅读量337

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_57156748/article/details/121522676

版权

面试 java

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是HTML

  <div class="sanjiao">
                    <div class="sanjiao-s"></div>
                  </div>

这是css代码

      .sanjiao {
                position: relative;
                width: 100px;
                height: 100px;
                overflow: hidden;
                transform: rotate(45deg) ;
                // background: #222;
                &>:before{
                  content:'';
                  display: block;
                  width:150px;
                  height: 150px;
                  transform: rotate(45deg) translateX(25%);
                  background:linear-gradient(to top,#fff,#ccc);
                }