css - 这个卷角的效果怎么做？

问题描述

问 题

第一个是原图，第二个 是做到一半的图，border中怎么加渐变的效果呢，还有阴影的效果，怎么才可以和原图一样呢？三角的阴影我加的是drop-shadow，可是上面也会有白色的阴影，还有我下面这个椭圆的伪元素怎样才能做出如图的阴影呢？
谢谢

解决方案

//html
<div class="form">
    <div class="corner"></div>
</div>

//css
.form{
    width:408px;
    height:200px;
    background:#2f2f2f;
    position:relative;
    overflow:hidden;
    margin:30px auto;
}
.corner{
    background:-webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);
    background:-moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
    background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
    background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
    background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
    width:90px;
    height:90px;
    border-radius:0 0 0px 90px / 0 0 0 30px;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg);
    position:absolute;
    left:-4px;
    top:-4px;
    box-shadow:5px 2px 8px black;
    overflow:hidden;
}
.corner:after{
    height:100%;
    width:100%;
    position:absolute;
    content:"";
    top:-15px;
    left:-82px;
    border-radius:90px 90px 0px 0 / 40px 40px 0 0;
    z-index:1;
    background:#2F2F2F;
    -webkit-transform:rotate(77deg);
    -moz-transform:rotate(77deg);
    -o-transform:rotate(77deg);
    -ms-transform:rotate(77deg);
    transform:rotate(77deg);
    box-shadow:0px 0px 8px black inset;
}

这篇关于css - 这个卷角的效果怎么做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！