css如何实现一个盒子圆角加直角的效果

在做前端的小伙伴是不是经常会遇到UI设计的奇奇怪怪的图形呢，今天小菜又抓狂了，怎么让一个div下方是直角，上方是圆角呢，css设置圆角大家都会，直角可咋整呢，别急，看看小菜的踩坑记就会了。

然而百度了一圈，度友们没有让我能直接实现的复用代码，自己研究了一会儿，终于巴拉出来了，先上效果图？

怎么样，是不是你想看的样子呢？

不废话了，上代码。

<div class="box"></div>

.box {

        position: relative;

        border-top-right-radius: 30px;

        background: linear-gradient(45deg, transparent 10px, #0B286E 0);

}

这样就出来啦。

你是不是还想问左上角那个小框子怎么弄呢，那是张图片哦，使用伪元素加上就可以的啦。

 

.box {

        position: relative;

        border-top-right-radius: 30px;

        background: linear-gradient(45deg, transparent 10px, #0B286E 0);

        &::before {

                position: absolute;

                content: "";

                top: 2px;

                left: 1px;

                width: 18px;

                height: 18px;

                background: url('topLeft.png') no-repeat center;

                background-size: 100% 100%;

        }

}

好啦，继续去搬砖了，加油加油