看到网上的教程都是用linear-gradient属性实现斜切,万一图形的背景颜色需要渐变,斜切就无法实现了,因此我使用了clip-path属性。
HTML部分:
<div class="outside">
<div class="inside"></div>
</div>
CSS部分:
.outside{
padding: 4px;
border: 1px solid #025185;
box-shadow:inset 0px 0px 5px 1px #025185;
width: 400px;
}
.inside{
width: 305px;
height: 20px;
background: linear-gradient(to right, #1E69FF, #03F7FF) top right;
clip-path: polygon(0% 0%, 0% 100%, calc(100% - 20px) 100%, 100% 0%);
background-size: 100% 100%;
background-repeat: no-repeat;
}
实现效果